在網頁設計中，折疊樹形菜單是非常常見的一種導航形式。通過CSS能夠很輕松地實現這種效果。下面就給大家介紹如何利用CSS折疊樹形菜單。
首先，在HTML中需要創建一個基本的菜單結構，比如下面這樣：

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

然后，在CSS中設置菜單的基本樣式，比如字體、顏色等等，代碼如下：

.menu li {
list-style: none; 
position: relative;
}
.menu a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
font-size: 14px;
}
.menu ul ul {
position: absolute;
top: 0;
left: 100%;
z-index: 999; 
opacity: 0; 
visibility: hidden;
transition: opacity 0.2s ease-in-out;
background-color: #fff;
box-shadow: 0 2px 2px rgba(0,0,0,0.1);
}
.menu ul ul li {
float: none;
width: 100%;
position: relative;
}
.menu ul ul a {
padding: 5px 10px;
font-size: 12px;
}
.menu ul li:hover > ul {
opacity: 1;
visibility: visible;
}

最后，加入折疊效果的代碼，即點擊菜單項時呈現子菜單：

.menu input[type="checkbox"] {
position: absolute;
visibility: hidden;
}
.menu input[type="checkbox"] ~ ul {
max-height: 0;
transition: max-height .25s ease-in-out;
}
.menu input[type="checkbox"]:checked ~ ul {
max-height: 1000px;
transition: max-height .5s ease-in-out;
}

以上就是創建折疊樹形菜單的全部代碼。在實際使用時，可以根據實際情況進行調整。使用CSS創建折疊樹形菜單，其實就是利用了CSS的各種樣式屬性及其操作方式，對HTML中的結構進行布局，達到了設計的效果。