CSS折疊菜單是Web設計中常見的一種交互方式。用戶可以通過點擊菜單項來展開或收起子菜單，這種菜單通常用在導航欄中。下面是一個簡單的折疊菜單示例：

/* 初始狀態，所有子菜單都隱藏 */
.submenu {
display: none;
}
/* 點擊菜單項時，展開或收起子菜單 */
.menu-item {
cursor: pointer;
}
.menu-item:focus + .submenu {
display: block;
}

以上代碼中，所有子菜單的"display"屬性都被設置為"none"，即默認狀態下不可見。每個菜單項都被指定為可點擊的"cursor:pointer"，點擊時可以觸發:focus偽類，它表示該元素獲得焦點。當菜單項獲得焦點時，緊鄰其后的下一個兄弟元素（即子菜單）被設置為"display:block"，從而被展開。

需要注意的是，如果用戶點擊菜單項時并未聚焦（即沒有獲得焦點），CSS折疊菜單將無法生效。因此，一般還會使用JavaScript代碼來處理這種情況，實現更為穩定的交互效果。

// 使用jQuery實現CSS折疊菜單的點擊事件處理
$('.menu-item').on('click', function() {
$(this).focus(); // 使菜單項獲得焦點
});

以上代碼使用jQuery庫綁定了".menu-item"元素的點擊事件，并在處理函數中使該元素獲得焦點。這樣，即使用戶沒有通過鍵盤操作聚焦到菜單項，CSS折疊菜單仍然可以正常工作。