手風琴式CSS也被稱為折疊菜單，是一種常用的網站導航設計。它的名字來自于手風琴樂器，因為當你點擊其中一個標簽時，其他標簽會像手風琴一樣折疊起來。

/* CSS代碼 */
.accordion {
overflow: hidden;
display: flex;
flex-direction: column;
}
.accordion__item {
border: 1px solid black;
margin-bottom: 10px;
}
.accordion__item-title {
padding: 10px;
background-color: gray;
color: white;
cursor: pointer;
}
.accordion__item-body {
padding: 10px;
display: none;
}
.accordion__item--active .accordion__item-body {
display: block;
}

以上是手風琴式CSS常見的樣式代碼。在這個例子中，我們首先將菜單設置成flex布局，并使其每個項垂直排列。

然后，我們為每個菜單項添加邊框和外邊距，使它們看起來不同于其他元素。我們還為每個菜單項-title添加了背景顏色和白色文本顏色，以使標題更加突出。

為了實現折疊效果，我們設置accordion__item-body的display為none，這意味著默認情況下，內容不可見。

最后，我們使用JavaScript為每個菜單項-title綁定單擊事件。當回調函數被調用時，我們將點擊的項設置為“active”，并顯示其相關內容。

手風琴式CSS是一種非常有用的Web設計技術，可以幫助網站設計師在有限的空間內更好地組織和呈現大量的信息。