CSS樹形折疊導航菜單是用CSS樣式來實現垂直折疊菜單的一種方式。

我們可以利用ul和li來構建菜單樹形結構，以及CSS樣式來控制菜單的顯示和折疊。

<ul class="menu">
<li>
<a href="#">菜單1</a>
<ul>
<li><a href="#">子菜單1</a></li>
<li><a href="#">子菜單2</a></li>
</ul>
</li>
<li>
<a href="#">菜單2</a>
<ul>
<li><a href="#">子菜單3</a></li>
<li><a href="#">子菜單4</a></li>
</ul>
</li>
</ul>

在樣式表中，我們利用CSS選擇器控制菜單的顯示和折疊效果。

/* 隱藏子菜單 */
.menu ul {
display: none;
}
/* 點擊菜單顯示或隱藏子菜單 */
.menu li:hover > ul {
display: block;
}
/* 添加折疊圖標 */
.menu li:before {
font-family: FontAwesome;
content: "\f105";  /* 用Unicode編碼添加圖標 */
float: left;
margin-right: 10px;
}
/* 修改展開狀態下折疊圖標 */
.menu li:hover:before {
content: "\f107"; /* 用Unicode編碼修改圖標 */
}

通過上述代碼，我們可以實現一個簡單的樹形折疊導航菜單，同時可以根據需要添加CSS樣式來改變菜單的樣式和功能。