縱向CSS二級(jí)導(dǎo)航菜單是網(wǎng)站設(shè)計(jì)中常用的一種導(dǎo)航菜單類型。它的特點(diǎn)是垂直排列，適用于較多的導(dǎo)航欄選項(xiàng)，同時(shí)也具有美觀、清晰、易于使用等優(yōu)點(diǎn)。 下面給大家介紹一下如何使用CSS實(shí)現(xiàn)一個(gè)簡單的縱向二級(jí)導(dǎo)航菜單，代碼如下：

<style>
.nav {
list-style: none;
margin: 0;
padding: 0;
}
.nav li {
position: relative;
}
.nav li a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
background-color: #fff;
border-top: 1px solid #ddd;
}
.nav li:hover a {
background-color: #f6f6f6;
}
.nav li ul {
position: absolute;
top: 100%;
left: 0;
width: 200px;
display: none;
list-style: none;
padding: 0;
margin: 0;
background-color: #f6f6f6;
border: 1px solid #ddd;
}
.nav li:hover ul {
display: block;
}
.nav li ul li a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
border-top: none;
}
.nav li ul li a:hover {
background-color: #e9e9e9;
}
</style>
<ul class="nav">
<li><a href="#">導(dǎo)航1</a>
<ul>
<li><a href="#">子導(dǎo)航1</a></li>
<li><a href="#">子導(dǎo)航2</a></li>
<li><a href="#">子導(dǎo)航3</a></li>
</ul>
</li>
<li><a href="#">導(dǎo)航2</a>
<ul>
<li><a href="#">子導(dǎo)航4</a></li>
<li><a href="#">子導(dǎo)航5</a></li>
<li><a href="#">子導(dǎo)航6</a></li>
</ul>
</li>
<li><a href="#">導(dǎo)航3</a>
<ul>
<li><a href="#">子導(dǎo)航7</a></li>
<li><a href="#">子導(dǎo)航8</a></li>
<li><a href="#">子導(dǎo)航9</a></li>
</ul>
</li>
</ul>

以上代碼包含兩個(gè)部分，一個(gè)是樣式部分，還有一個(gè)是HTML部分。我們在樣式部分使用了`.nav`來定義導(dǎo)航欄的樣式，使用`.nav li`來定義導(dǎo)航欄欄目的樣式，使用`.nav li a`來定義導(dǎo)航鏈接的樣式。在HTML部分，我們嵌套了一個(gè)子菜單，并使用`ul`和`li`標(biāo)簽來進(jìn)行層級(jí)結(jié)構(gòu)的布置。最后，通過CSS設(shè)置子菜單的固定位置并設(shè)置隱藏和顯示效果，使鼠標(biāo)懸浮在主導(dǎo)航欄上時(shí)呈現(xiàn)出子菜單。 以上就是關(guān)于如何使用CSS實(shí)現(xiàn)一個(gè)縱向二級(jí)導(dǎo)航菜單的簡單介紹了，希望對(duì)大家有所幫助。