CSS中的二級菜單是網站設計中非常常見的元素。而將二級菜單放在正下方，則是在排版和視覺效果上比較優秀的選擇。下面，我們來看一下如何實現這種效果。

<ul class="parent-menu">
<li><a href="#">菜單1</a>
<ul class="child-menu">
<li><a href="#">二級菜單1</a></li>
<li><a href="#">二級菜單2</a></li>
<li><a href="#">二級菜單3</a></li>
</ul>
</li>
<li><a href="#">菜單2</a>
<ul class="child-menu">
<li><a href="#">二級菜單1</a></li>
<li><a href="#">二級菜單2</a></li>
<li><a href="#">二級菜單3</a></li>
</ul>
</li>
</ul>
.parent-menu>li {
float: left;
position: relative;
}
.child-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
z-index: 999;
}
.parent-menu>li:hover .child-menu {
display: block;
}

以上代碼的基本原理是，對于一級菜單li元素，用float: left進行左浮動，使得菜單水平排成一行。然后，對應的二級菜單ul元素設為absolute定位，使用top: 100%讓其緊貼一級菜單下方。最后，在一級菜單的hover狀態下，通過display: block呈現二級菜單。