Web開發中常常需要在頁面中添加導航菜單，當導航菜單有多個層級時，就需要實現二級菜單。而CSS能夠幫助我們實現漂亮的菜單效果，下面就介紹如何用CSS來實現二級菜單。

// HTML結構
<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; // 需要設置為相對定位，為了子菜單能夠以此為父級參考點
}
.menu a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
.menu .sub-menu {
position: absolute; // 子菜單需要設置為絕對定位
left: 0;
top: 100%;
background-color: #fff;
border: 1px solid #ccc;
z-index: 1; // 需要設置比父級菜單的層級高
display: none; // 一開始隱藏子菜單
}
.menu li:hover .sub-menu {
display: block; // 鼠標懸浮在父級菜單上時，顯示子菜單
}
.menu .sub-menu li {
float: none; // 子菜單中的菜單需要取消浮動
border-bottom: 1px solid #ccc; // 分割線
}
.menu .sub-menu li:last-child {
border-bottom: none; // 去掉最后一個菜單的分割線
}

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