CSS實(shí)現(xiàn)縱向下拉菜單是網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的技巧。下面我們將介紹實(shí)現(xiàn)方法。

/* CSS代碼 */
.nav {
position: relative;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav li {
position: relative;
}
.nav li >ul {
position: absolute;
top: 100%;
left: 0;
display: none;
}
.nav li:hover >ul {
display: block;
}

以上CSS代碼的解釋如下：

/* 讓.nav元素獲得相對(duì)定位 */
.nav {
position: relative;
}
/* 去除ul元素的默認(rèn)樣式 */
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
/* 讓li元素的定位相對(duì)于.nav元素 */
.nav li {
position: relative;
}
/* 將子菜單隱藏，并相對(duì)于父菜單底部定位 */
.nav li >ul {
position: absolute;
top: 100%;
left: 0;
display: none;
}
/* 鼠標(biāo)懸停時(shí)顯示子菜單 */
.nav li:hover >ul {
display: block;
}

在HTML代碼中，可以使用以下方式構(gòu)造縱向下拉菜單：

<div class="nav">
<ul>
<li>菜單1
<ul>
<li>子菜單1-1</li>
<li>子菜單1-2</li>
<li>子菜單1-3</li>
</ul>
</li>
<li>菜單2
<ul>
<li>子菜單2-1</li>
<li>子菜單2-2</li>
<li>子菜單2-3</li>
</ul>
</li>
<li>菜單3
<ul>
<li>子菜單3-1</li>
<li>子菜單3-2</li>
<li>子菜單3-3</li>
</ul>
</li>
</ul>
</div>

這樣就可以得到一個(gè)簡單的縱向下拉菜單，當(dāng)鼠標(biāo)懸停在菜單項(xiàng)上時(shí)，其對(duì)應(yīng)的子菜單就會(huì)顯示出來。