CSS手風琴是一種常見的導航菜單效果，它可以在網站界面中為用戶提供更好的體驗。下面我們就來介紹一下如何使用CSS手風琴的方法與技巧。

.accordion {
width: 100%;
max-width: 600px;
margin: 0 auto;
background-color: #FFF;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.accordion__item {
position: relative;
border-bottom: 1px solid #EDEDED;
}
.accordion__item:last-child {
border-bottom: none;
}
.accordion__item__header {
position: relative;
padding: 20px;
font-weight: 700;
cursor: pointer;
transition: all .3s ease;
}
.accordion__item__header:before {
content: "+";
position: absolute;
top: 20px;
right: 20px;
font-size: 30px;
line-height: 1;
font-weight: 700;
transition: all .3s ease;
}
.accordion__item.active .accordion__item__header:before {
content: "-";
}
.accordion__item__content {
overflow: hidden;
max-height: 0;
transition: all .3s ease;
}
.accordion__item.active .accordion__item__content {
overflow: auto;
max-height: 500px;
transition: all .3s ease;
}

首先，在代碼中定義一個 class 為 accordion 的容器，它可以包含多個 .accordion__item 元素，每個元素包含一個標題 .accordion__item__header 和內容 .accordion__item__content。

然后使用 CSS 設置每個元素的樣式，給每個 .accordion__item__header 添加一個點擊事件，當點擊時，通過添加或刪除 .active 類來顯示或隱藏內容區域 .accordion__item__content，并通過改變內容的 max-height 來實現手風琴的展開和折疊效果。

總結：CSS手風琴的制作并不復雜，只需要掌握一定的 CSS 技巧，就能輕松實現這個常見的導航菜單效果。在實際項目中可以根據需要進行修改和優化。