多層導航欄是網頁設計中常用的一種導航方式。在實現多層導航欄時，我們可以借助CSS來實現。以下是一份實現多層導航欄的CSS代碼：

.nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
height: 50px;
padding: 0 20px;
}
.nav a {
color: #fff;
text-decoration: none;
padding: 10px;
}
.nav .subnav {
position: absolute;
top: 50px;
background-color: #333;
padding: 20px;
display: none;
}
.nav .subnav a {
display: block;
color: #fff;
text-decoration: none;
padding: 10px 0;
}
.nav li:hover .subnav {
display: block;
}
.nav .subnav .subnav {
left: 120%;
top: 0;
}

代碼解釋：

首先，我們給導航欄設置了一個類名為.nav。通過flex布局，使導航欄的子元素（a標簽）水平顯示并居中對齊，并設定了導航欄高度和左右內邊距。同時背景顏色設定為深灰色。

接下來，為導航欄中每一個鏈接設置樣式（a標簽）。文字顏色為白色，同時設定文字上下內邊距10像素。

再次，在導航欄的子元素中，我們選定了類名為.subnav的元素，并設置了它的位置屬性為絕對定位。這樣可以讓子元素在父元素之外顯示。

子元素的高度和背景顏色與父元素保持一致。子元素中的鏈接樣式和父元素中的一致，但是刪除了左右內邊距。

通過:hover偽類，我們為導航欄的li元素添加了鼠標懸停效果。當用戶將鼠標懸停在li元素上時，子元素.subnav就會顯示出來。這樣就實現了多層導航欄。

如果您想在導航欄中再添加一個子元素，只需添加一個類名為.subnav的div，將其放在另一個.subnav元素中，然后將.left屬性設置為120%。這樣，該子元素就會在它的父元素的右側顯示。