CSS收縮菜單是網站開發中經常用到的一種設計，它可以有效的將菜單隱蔽起來，以達到更好的視覺效果和用戶體驗。下面來詳細講解如何用CSS實現收縮菜單。

/*收縮菜單css樣式*/
.menu{
display: none; /*將菜單隱藏*/
}
.toggle:checked ~ .menu{
display: block; /*當勾選狀態時，顯示菜單*/
}

以上是簡單的CSS樣式代碼，下面解釋一下具體實現方法。首先，在HTML中創建一個切換按鈕和一個菜單容器，代碼如下：

<input type="checkbox" id="toggle"/><label for="toggle">菜單</label><ul class="menu"><li><a href="#">菜單項1</a></li>
<li><a href="#">菜單項2</a></li>
<li><a href="#">菜單項3</a></li>
</ul>

切換按鈕和菜單都需要使用label標簽和input標簽結合，將兩者綁定在一起。首先將菜單容器的display屬性設置為none，即默認情況下菜單是隱藏的。

.menu{
display: none;
}

接著，添加一個切換按鈕和一個菜單容器的:checked偽類選擇器。當切換按鈕被勾選時（即:checked狀態），菜單容器的display屬性變為block，即展開菜單，代碼如下：

.toggle:checked ~ .menu{
display: block;
}

最后，在label標簽中添加“菜單”文字即可。當用戶點擊這段文字時，就會勾選切換按鈕，展開菜單。

以上就是CSS收縮菜單的實現方法，使用簡單的CSS代碼即可將菜單隱蔽，達到更美觀、易用的效果。