今天我們來講一下折疊菜單的css樣式。折疊菜單在網頁設計中非常常見，因為它可以將一些隱藏的內容通過點擊展開給用戶，提高頁面的可讀性和用戶體驗。 首先，我們需要一個基礎的html結構，包含一個觸發展開的按鈕和隱藏的內容部分。

<div class="menu">
<button class="collapse">展開</button>
<div class="content">
<p>這里是要隱藏的內容</p>
</div>
</div>

接下來，我們需要設置一些css樣式來實現折疊效果。首先我們將content部分隱藏起來，然后針對不同狀態的按鈕設置樣式，比如展開時設置背景顏色和旋轉角度。

.menu .content {
display: none;
}
.menu .collapse {
background-color: #ccc;
}
.menu .collapse.open {
transform: rotate(180deg);
background-color: #aaa;
}

為了實現展開和關閉的過渡效果，我們可以使用css的transition屬性，并在展開時將content的display屬性設置為block，關閉時設置為none。

.menu .content {
display: none;
transition: all 0.3s ease-out;
}
.menu .content.open {
display: block;
}
.menu .collapse {
background-color: #ccc;
transition: all 0.3s ease-out;
}
.menu .collapse.open {
transform: rotate(180deg);
background-color: #aaa;
}

最后，我們還可以添加一些鼠標懸停時的樣式，比如修改鼠標指針的樣式和設置按鈕的邊框。

.menu .collapse:hover {
cursor: pointer;
border: 1px solid #333;
}

通過上述代碼，我們就可以實現一個簡單的折疊菜單了。當然，具體的樣式和效果還可以根據實際需求進行調整和修改。 總之，使用css實現折疊菜單是一項非常實用的技能，能夠提高頁面的交互性和用戶體驗。希望本文能夠對大家有所幫助。