隨著越來越多的網站變得復雜，原來的導航菜單已經無法滿足用戶的需求。隱藏式菜單在這樣的背景下被廣泛運用。隱藏式菜單通常是通過點擊或滑動觸發的，能夠提供更多的空間，同時也更加現代和簡潔。

在實現隱藏式菜單時，CSS是不可或缺的。下面，我們來看一下如何使用CSS實現純CSS隱藏式菜單。

/* 讓菜單不可見 */
.menu {
display: none;
}
/* 伸展菜單時顯示 */
.checkbox:checked ~ .menu {
display: block;
}
/* 實現伸展/收縮形態變化 */
.checkbox {
position: absolute;
opacity: 0;
z-index: -1;
}
.label {
display: inline-block;
}
.menu {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
.checkbox:checked ~ .menu {
max-height: 500px;
}

我們首先將菜單設置為不可見，并在伸展菜單時改為可見。這是通過checkbox的狀態改變實現的。然后，我們使用CSS的過渡（transition）屬性來實現菜單的伸展/收縮形態變化。當checkbox的狀態改變為"checked"時，我們將菜單的最大高度設置為500像素。

在實現隱藏式菜單時，CSS還有其他的技巧，如使用transform屬性實現旋轉動畫等等。總之，CSS是實現隱藏式菜單的關鍵，同時使得我們的設計變得更加現代和美觀。