使用CSS實(shí)現(xiàn)可展開收縮的導(dǎo)航菜單

導(dǎo)航菜單是網(wǎng)站中必不可少的一部分，而可展開收縮的導(dǎo)航菜單可以讓網(wǎng)頁更加簡潔美觀，同時也方便用戶瀏覽，那么該如何用CSS實(shí)現(xiàn)這樣的效果呢？下面是一個簡單的示例：

<ul class="menu">
<li>
<a href="#">菜單1</a>
<ul class="submenu">
<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></li>
<li><a href="#">菜單3</a></li>
<li><a href="#">菜單4</a></li>
</ul>

上面的代碼中，我們用<ul>和<li>標(biāo)簽表示導(dǎo)航菜單，而子菜單則用<ul>和<li>標(biāo)簽表示；其中<ul>標(biāo)簽額外添加了一個class屬性，用于后續(xù)實(shí)現(xiàn)可展開和收縮的效果。

.menu {
list-style: none;
}
.menu li {
float: left;
position: relative;
}
.menu li:hover > .submenu {
display: block;
}
.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
}
.submenu li {
display: block;
}

接下來，我們使用CSS來設(shè)置導(dǎo)航菜單的樣式，其中

標(biāo)簽的list-style屬性設(shè)置為none，去除默認(rèn)的小圓點(diǎn)；
• 標(biāo)簽設(shè)置了float為left，將菜單項(xiàng)橫向排列；而submenu的樣式則設(shè)置了display為none，把子菜單初始化為不顯示的狀態(tài)。

  最后一個CSS屬性設(shè)置則是為了實(shí)現(xiàn)可展開和收縮的效果，當(dāng)鼠標(biāo)懸停在菜單項(xiàng)上時，使用:hover偽類選擇器將子菜單的display屬性設(shè)置為block，實(shí)現(xiàn)展開的效果。

  通過上面的簡單示例，你可以了解到怎樣使用CSS實(shí)現(xiàn)可展開收縮的導(dǎo)航菜單。當(dāng)然，在實(shí)際開發(fā)中，我們還可以對這個效果進(jìn)行更加細(xì)致的調(diào)整和優(yōu)化，以滿足不同的需求。