下拉菜單在網(wǎng)頁(yè)設(shè)計(jì)中非常常見(jiàn)，它可以給用戶(hù)提供更多的選項(xiàng)，并且占用的空間也相對(duì)較少。而在 CSS 中，實(shí)現(xiàn)下拉菜單也是非常簡(jiǎn)單的。

/* HTML */
<div class="menu">
<ul>
<li>菜單1
<ul>
<li>子菜單1</li>
<li>子菜單2</li>
</ul>
</li>
<li>菜單2</li>
<li>菜單3</li>
</ul>
</div>
/* CSS */
.menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
float: left;
position: relative;
}
.menu ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
.menu li:hover > ul {
display: block;
}

上面的代碼會(huì)生成一個(gè)橫向的導(dǎo)航菜單，當(dāng)鼠標(biāo)懸停在菜單項(xiàng)上時(shí)，會(huì)出現(xiàn)下拉菜單。實(shí)現(xiàn)的關(guān)鍵點(diǎn)在于使用了position: relative;和position: absolute;，前者是為了讓菜單項(xiàng)能夠作為下拉菜單的父級(jí)元素，后者則是為了讓下拉菜單能夠相對(duì)于父級(jí)元素進(jìn)行定位。

另外需要注意的是，在未懸停時(shí)，下拉菜單默認(rèn)是隱藏的（通過(guò)display: none;實(shí)現(xiàn)），當(dāng)鼠標(biāo)懸停在菜單項(xiàng)上時(shí)，利用 CSS 選擇器:hover將下拉菜單的display屬性改為block，這樣下拉菜單才能出現(xiàn)。

總的來(lái)說(shuō)，實(shí)現(xiàn)一個(gè) CSS 下拉菜單并不難，只需要掌握一些 CSS 布局和選擇器的技巧，就能輕松地實(shí)現(xiàn)。