可折疊樹狀菜單是現在很流行的一種網頁設計，特別是對于需要展示大量內容的網站，它的優勢尤為明顯。CSS是前端工程師經常要用到的技術，而CSS實現可折疊樹狀菜單也非常簡單，下面介紹一下CSS可折疊樹狀菜單的實現。

/* 首先定義一個ul列表 */
ul {
list-style: none;
}
/* 定義一個帶箭頭的偽元素 */
li::before {
content: "\25B6";   /* Unicode箭頭編碼 */
margin-right: 5px;
transform: rotate(90deg);
transition: transform 0.2s ease-in-out;
cursor: pointer;
}
/* 定義展開后箭頭方向 */
li.open::before {
transform: rotate(0);
}
/* 隱藏子級列表 */
ul ul {
display: none;
}
/* 點擊父級列表展開或折疊子級列表 */
li.has-children::before {
cursor: pointer;
}
li.has-children:hover::before {
color: #999;
}
li.has-children.active >ul {
display: block;
}

通過CSS控制可折疊樹狀菜單，不僅方便了網頁開發人員，也增加了用戶體驗。CSS還可以控制折疊樹狀菜單的樣式，例如箭頭的顏色、大小等，可以使網站更加美觀。