今天我們來講一下如何使用 CSS 來實現一個樹形菜單樣式！ 首先，我們需要 HTML 結構，簡單的示例代碼如下：

<ul class="tree-menu">
<li>
<a href="#">一級菜單 A</a>
<ul>
<li><a href="#">二級菜單 A </a></li>
<li><a href="#">二級菜單 B </a></li>
<li><a href="#">二級菜單 C </a>
<ul>
<li><a href="#">三級菜單 A </a></li>
<li><a href="#">三級菜單 B </a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">一級菜單 B</a></li>
</li>
</ul>

接下來，讓我們使用 CSS 來美化這個樹形菜單。 首先，我們為一級菜單樣式設置 padding，使其從左側空出一些空間。另外，我們使用背景顏色和顏色屬性來設置背景和文字顏色。

.tree-menu li>a {
padding: 5px 10px;
background-color: #eee;
color: #333;
}

然后，我們使用 CSS 的偽類選擇器 :hover 來設置鼠標懸停時的樣式。在一級菜單上，我們使用顏色和背景顏色屬性來進行設置。

.tree-menu li>a:hover {
color: #fff;
background-color: #0074D9;
}

在二級及以下的菜單上，我們將文字向右移動，并使用 border-left 屬性添加一個左側邊框，使其更加清晰易辨。

.tree-menu ul ul li>a {
padding-left: 30px;
border-left: 1px solid #bbb;
}

最后我們使用 list-style 屬性為每個列表項添加一個點號。同時，我們使用 margin 屬性來美化層次關系，使其呈現出嵌套的結構。

.tree-menu li {
list-style: disc;
margin: 5px 0;
}

最終，我們的樹形菜單樣式便完成了！可以根據實際需要進行微調和修改，讓其更符合自己的需求。 希望這篇文章能夠幫助到您，謝謝閱讀！