折疊菜單是網(wǎng)頁設計中常用的功能之一，通過CSS可以輕松實現(xiàn)。在本文中，我們將詳細介紹如何使用CSS折疊菜單。 首先，在HTML文件中創(chuàng)建一個簡單的菜單列表。例如：

<ul>
<li><a href="#">選項1</a></li>
<li><a href="#">選項2</a></li>
<li><a href="#">選項3</a></li>
</ul>

為了折疊菜單的效果，在CSS文件中，添加以下代碼：

ul li ul {
display: none;
}
ul li:hover ul {
display: block;
}

上述代碼中，我們給菜單列表下面的子菜單設置了display:none來隱藏該子菜單，當鼠標放在菜單選項上時，使用:hover偽類選擇器實現(xiàn)子菜單的display:block來顯示該子菜單。 此時我們的折疊菜單已經(jīng)實現(xiàn)了，但是只有簡單的出現(xiàn)和隱藏效果。如果您想要更加高級的折疊菜單效果，您可以使用CSS3的transition屬性，如下所示：

ul li ul {
opacity: 0;
max-height: 0;
transition: all 0.5s ease-in-out;
}
ul li:hover ul {
opacity: 1;
max-height: 1000px;
transition: all 0.5s ease-in-out;
}

在上述代碼中，我們使用了opacity和max-height屬性來控制子菜單的折疊和展開，同時使用了CSS3的transition屬性，實現(xiàn)了平滑過渡的效果。 總結(jié)一下，折疊菜單是一種非常實用的網(wǎng)頁設計功能，使用CSS可以輕松實現(xiàn)。您可以根據(jù)您的需求選擇簡單的效果或者高級的過渡效果來實現(xiàn)該功能。