CSS實現縱向下拉菜單是網頁設計中經常用到的技巧。下面我們將介紹實現方法。

/* 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元素獲得相對定位 */
.nav {
position: relative;
}
/* 去除ul元素的默認樣式 */
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
/* 讓li元素的定位相對于.nav元素 */
.nav li {
position: relative;
}
/* 將子菜單隱藏，并相對于父菜單底部定位 */
.nav li >ul {
position: absolute;
top: 100%;
left: 0;
display: none;
}
/* 鼠標懸停時顯示子菜單 */
.nav li:hover >ul {
display: block;
}

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

<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>

這樣就可以得到一個簡單的縱向下拉菜單，當鼠標懸停在菜單項上時，其對應的子菜單就會顯示出來。