Web開發(fā)中常常需要在頁(yè)面中添加導(dǎo)航菜單，當(dāng)導(dǎo)航菜單有多個(gè)層級(jí)時(shí)，就需要實(shí)現(xiàn)二級(jí)菜單。而CSS能夠幫助我們實(shí)現(xiàn)漂亮的菜單效果，下面就介紹如何用CSS來(lái)實(shí)現(xiàn)二級(jí)菜單。

// HTML結(jié)構(gòu)
<ul class="menu">
<li>
<a href="#">菜單1</a>
<ul class="sub-menu">
<li><a href="#">子菜單1</a></li>
<li><a href="#">子菜單2</a></li>
</ul>
</li>
<li>
<a href="#">菜單2</a>
</li>
</ul>
// CSS樣式
.menu {
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
float: left;
position: relative; // 需要設(shè)置為相對(duì)定位，為了子菜單能夠以此為父級(jí)參考點(diǎn)
}
.menu a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
.menu .sub-menu {
position: absolute; // 子菜單需要設(shè)置為絕對(duì)定位
left: 0;
top: 100%;
background-color: #fff;
border: 1px solid #ccc;
z-index: 1; // 需要設(shè)置比父級(jí)菜單的層級(jí)高
display: none; // 一開始隱藏子菜單
}
.menu li:hover .sub-menu {
display: block; // 鼠標(biāo)懸浮在父級(jí)菜單上時(shí)，顯示子菜單
}
.menu .sub-menu li {
float: none; // 子菜單中的菜單需要取消浮動(dòng)
border-bottom: 1px solid #ccc; // 分割線
}
.menu .sub-menu li:last-child {
border-bottom: none; // 去掉最后一個(gè)菜單的分割線
}

通過(guò)上述代碼，二級(jí)菜單的效果實(shí)現(xiàn)了。其中，我們需要設(shè)置父級(jí)菜單為相對(duì)定位，設(shè)置子菜單為絕對(duì)定位，并在父級(jí)菜單上添加:hover偽類，控制子菜單的顯示與隱藏。通過(guò)CSS設(shè)置樣式，我們可以實(shí)現(xiàn)漂亮的二級(jí)菜單效果。