CSS可折疊菜單是網頁設計中常見的實現方式，能夠提高頁面的可讀性和交互性。本文將介紹如何使用CSS實現可折疊菜單。

首先，我們需要寫出HTML結構。一個典型的可折疊菜單通常包含菜單標題和內容部分。菜單標題用于展示菜單項名稱，而內容部分則包含菜單項對應的子菜單。下面是一個簡單的HTML結構示例：

<div class="menu">
<div class="menu-title">菜單標題</div>
<ul class="menu-content">
<li>子菜單項1</li>
<li>子菜單項2</li>
<li>子菜單項3</li>
</ul>
</div>

接下來，我們需要使用CSS將菜單內容隱藏，并添加折疊菜單的樣式。我們可以使用“display: none;”來隱藏菜單內容，用“visibility: visible;”來讓菜單標題在 folding 狀態下仍然可見。下面是一個簡單的CSS樣式代碼：

.menu-content {
display: none;
}
.menu-title {
cursor: pointer;
}
.menu-title.folding {
background-color: #eee;
}
.menu-title.folding::after {
content: "?";
}
.menu-title.unfolding {
background-color: #ddd;
}
.menu-title.unfolding::after {
content: "▼";
}
.menu-title.unfolding + .menu-content {
display: block;
}

最后，我們需要在JavaScript中實現折疊菜單的效果。我們可以使用“addEventListener”來監聽菜單標題的點擊事件，并在點擊時切換菜單的折疊狀態。下面是一個簡單的JavaScript代碼：

const menuTitle = document.querySelector('.menu-title');
menuTitle.addEventListener('click', function() {
const menuContent = this.nextElementSibling;
if (menuTitle.className.includes('folding')) {
menuTitle.classList.remove('folding');
menuTitle.classList.add('unfolding');
menuContent.style.maxHeight = menuContent.scrollHeight + "px";
} else {
menuTitle.classList.remove('unfolding');
menuTitle.classList.add('folding');
menuContent.style.maxHeight = null;
}
});

以上便是如何使用CSS實現可折疊菜單的全部步驟。我們可以根據需求進行修改和擴展，實現更加復雜的菜單效果。