垂直折疊菜單是一種美觀實(shí)用的菜單形式，可以在小屏幕設(shè)備上節(jié)省視覺空間，提高布局效率。今天我們要介紹的是使用CSS實(shí)現(xiàn)垂直折疊菜單的方法。讓我們一起來看看如何實(shí)現(xiàn)吧！

代碼如下：
HTML結(jié)構(gòu)：
<ul class="menu">
<li>
<a href="#">菜單項(xiàng)1</a>
<ul>
<li><a href="#">子菜單項(xiàng)1</a></li>
<li><a href="#">子菜單項(xiàng)2</a></li>
<li><a href="#">子菜單項(xiàng)3</a></li>
</ul>
</li>
<li>
<a href="#">菜單項(xiàng)2</a>
<ul>
<li><a href="#">子菜單項(xiàng)1</a></li>
<li><a href="#">子菜單項(xiàng)2</a></li>
</ul>
</li>
<li><a href="#">菜單項(xiàng)3</a></li>
</ul>
CSS樣式：
.menu li ul {
display: none;
}
.menu li:hover ul {
display: block;
}
.menu a{
display: block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
background-color: #333;
}
.menu li:hover > a{
background-color: #666;
}
.menu ul li a{
background-color: #666;
color: #fff;
}
.menu ul li a:hover{
background-color: #999;
}
.menu ul {
padding: 0;
margin: 0;
}
.menu li {
list-style: none;
margin: 0;
padding: 0;
}

在HTML結(jié)構(gòu)中，我們使用ul和li標(biāo)簽來實(shí)現(xiàn)菜單的基本結(jié)構(gòu)。每個(gè)菜單項(xiàng)使用li標(biāo)簽包裹，子菜單使用ul標(biāo)簽實(shí)現(xiàn)嵌套。在CSS樣式中，我們使用display屬性將子菜單默認(rèn)設(shè)為不顯示，當(dāng)鼠標(biāo)浮動(dòng)到父菜單項(xiàng)上時(shí)，使用:hover偽類將子菜單設(shè)為顯示狀態(tài)。同時(shí)，我們?yōu)椴藛雾?xiàng)和子菜單項(xiàng)分別添加了不同的樣式，使其顏色和背景色有所區(qū)分，增強(qiáng)視覺效果。最后，在li元素上使用list-style:none屬性去掉默認(rèn)的列表標(biāo)記，使菜單更美觀。