折疊式菜單是網頁開發中經常使用的功能之一。使用CSS可以輕松實現這個功能。本文將向您介紹如何使用CSS實現折疊式菜單。
首先，我們需要定義一個包含菜單的容器。可以使用一個div元素來創建這個容器，然后將菜單選項放到容器中。如下所示：

<div class="menu">
<p>菜單選項1</p>
<p>菜單選項2</p>
<p>菜單選項3</p>
</div>

接下來，我們需要為每個菜單選項添加一個可折疊的內容區域。使用CSS中的display屬性可以輕松實現這一點。將內容區域的display屬性設置為none，然后使用偽類:hover將其設置為block。如下所示：

<div class="menu">
<p>菜單選項1</p>
<div class="collapsible">
<p>這是菜單選項1的內容區域</p>
</div>
<p>菜單選項2</p>
<div class="collapsible">
<p>這是菜單選項2的內容區域</p>
</div>
<p>菜單選項3</p>
<div class="collapsible">
<p>這是菜單選項3的內容區域</p>
</div>
</div>
<style>
.collapsible {
display: none;
}
.collapsible:hover {
display: block;
}
</style>

這段代碼將為每個菜單選項添加一個內容區域，并將這些內容區域初始化為不可見。然后，當用戶把鼠標懸停在菜單選項上時，將顯示對應的內容區域。
最后，我們可以使用CSS調整菜單樣式。例如，可以使用padding和margin屬性調整菜單選項和內容之間的間距，使用border屬性添加邊框等等。
本文向您展示了如何使用CSS實現折疊式菜單。您可以根據實際需求進行調整和修改，以滿足您的網頁設計需求。