CSS是一種用于網頁設計的語言。它可以幫助我們美化網頁，讓網頁更加美觀、易讀、易用等。當我們需要在網頁中呈現出樹形結構的時候，CSS 是一個非常好的選擇，它可以輕松實現此目的。

/* 定義基本樣式 */
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
/* 定義子元素樣式 */
li {
position: relative;
padding-left: 20px;
line-height: 20px;
}
/* 定義子元素前面的小圖標 */
li:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 10px;
height: 10px;
border: 1px solid #000;
border-radius: 50%;
}
/* 定義子元素的子元素樣式 */
li li {
padding-left: 40px;
}
/* 定義最后一個子元素的樣式 */
li:last-child {
margin-bottom: 0;
}
/* 定義子元素展開與收縮的樣式 */
li.has-child:before {
content: "+";
font-size: 12px;
font-weight: bold;
cursor: pointer;
}
li.has-child.collapsed:before {
content: "-";
}
/* 子元素的狀態 */
li > ul {
display: none;
}
li.expanded > ul {
display: block;
}

上面的代碼中，我們首先定義了一個 ul，去掉了樣式中的默認列表標記，在子元素使用一些內邊距和行高。接下來，我們又為每個 li 定義了一個前置元素，樣式先默認顯示一個用于標識元素的小圓形圖標，當展開子元素時，將使用另外一個圖標。最后，我們還定義了展開和收縮功能，這是通過添加一些 JavaScript 代碼來實現的。

使用上面的 CSS 代碼，我們可以很容易地創建一個樹形結構的菜單或列表，這可以幫助訪問者更快地定位他們所需要的信息。