多層導(dǎo)航欄是網(wǎng)頁(yè)設(shè)計(jì)中常用的一種導(dǎo)航方式。在實(shí)現(xiàn)多層導(dǎo)航欄時(shí)，我們可以借助CSS來(lái)實(shí)現(xiàn)。以下是一份實(shí)現(xiàn)多層導(dǎo)航欄的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;
}

代碼解釋：

首先，我們給導(dǎo)航欄設(shè)置了一個(gè)類名為.nav。通過(guò)flex布局，使導(dǎo)航欄的子元素（a標(biāo)簽）水平顯示并居中對(duì)齊，并設(shè)定了導(dǎo)航欄高度和左右內(nèi)邊距。同時(shí)背景顏色設(shè)定為深灰色。

接下來(lái)，為導(dǎo)航欄中每一個(gè)鏈接設(shè)置樣式（a標(biāo)簽）。文字顏色為白色，同時(shí)設(shè)定文字上下內(nèi)邊距10像素。

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

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

通過(guò):hover偽類，我們?yōu)閷?dǎo)航欄的li元素添加了鼠標(biāo)懸停效果。當(dāng)用戶將鼠標(biāo)懸停在li元素上時(shí)，子元素.subnav就會(huì)顯示出來(lái)。這樣就實(shí)現(xiàn)了多層導(dǎo)航欄。

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