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

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

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

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

上述代碼中，我們給菜單列表下面的子菜單設(shè)置了display:none來隱藏該子菜單，當(dāng)鼠標(biāo)放在菜單選項(xiàng)上時(shí)，使用:hover偽類選擇器實(shí)現(xiàn)子菜單的display:block來顯示該子菜單。 此時(shí)我們的折疊菜單已經(jīng)實(shí)現(xiàn)了，但是只有簡單的出現(xiàn)和隱藏效果。如果您想要更加高級(jí)的折疊菜單效果，您可以使用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屬性來控制子菜單的折疊和展開，同時(shí)使用了CSS3的transition屬性，實(shí)現(xiàn)了平滑過渡的效果。 總結(jié)一下，折疊菜單是一種非常實(shí)用的網(wǎng)頁設(shè)計(jì)功能，使用CSS可以輕松實(shí)現(xiàn)。您可以根據(jù)您的需求選擇簡單的效果或者高級(jí)的過渡效果來實(shí)現(xiàn)該功能。