CSS能實現的一項非常有用的功能就是目錄樹。目錄樹的實現可以讓我們更加方便地查看網頁或者文件目錄的結構。通過CSS，我們可以自定義目錄樹的樣式，讓它更加美觀和易于閱讀。

想要創建一個目錄樹，我們需要的是HTML結構和CSS樣式。一個簡單的目錄樹可以通過以下HTML代碼來構建：

<ul class="tree">
<li>
<a href="#">目錄1</a>
<ul>
<li><a href="#">子目錄1.1</a></li>
<li><a href="#">子目錄1.2</a></li>
</ul>
</li>
<li>
<a href="#">目錄2</a>
<ul>
<li><a href="#">子目錄2.1</a></li>
<li><a href="#">子目錄2.2</a></li>
</ul>
</li>
</ul>

在上面的HTML代碼中，我們使用了<ul>和<li>標簽來創建目錄樹，并通過<a>標簽來添加鏈接。接下來，我們需要使用CSS樣式來自定義目錄樹的樣式。

以下是一個簡單的CSS樣式，可以使我們的目錄樹看起來更加美觀：

ul.tree {
list-style: none;
margin: 0;
padding: 0;
}
ul.tree li {
padding: 10px;
position: relative;
}
ul.tree li:before {
content: '';
position: absolute;
top: 0;
left: -20px;
border-left: 1px solid #ccc;
height: 100%;
}
ul.tree li:last-child:before {
height: 10px;
}
ul.tree li:after {
content: '';
position: absolute;
top: 18px;
left: -20px;
border-left: 1px solid #ccc;
height: 100%;
}
ul.tree li a {
color: #333;
text-decoration: none;
}
ul.tree li a:hover {
text-decoration: underline;
}

在上面的CSS樣式中，我們使用了偽元素來繪制目錄樹的豎線，使它顯示為樹狀結構。此外，我們還設置了鏈接的顏色和鼠標懸停時的下劃線，增強了用戶的交互體驗。

總的來說，通過CSS實現目錄樹不僅可以提高網頁的可讀性和美觀度，還可以使用戶更加方便地瀏覽網頁和文件目錄。