Tree CSS樣式通常用于創建具有層級結構的導航菜單或文件目錄。通過使用CSS屬性對菜單項進行嵌套，可以輕松地構建樹形結構。

ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin: 0;
padding: 0;
padding-left: 1em;
position: relative;
}
li:before {
content: "";
position: absolute;
top: 0;
left: -0.5em;
border-left: 1px solid #ccc;
height: 100%;
}
li:last-child:before {
height: 1em;
}
li:last-child:after {
height: 1em;
content: "";
position: absolute;
top: auto;
bottom: 0;
left: -0.5em;
border-left: 1px solid #ccc;
}
li:after {
content: "";
position: absolute;
top: 0;
left: -0.5em;
border-top: 1px solid #ccc;
width: 1em;
}
ul ul li:before {
height: 1em;
top: auto;
bottom: 0;
}
ul ul li:after {
width: calc(100% + 0.5em);
left: -0.25em;
}

上面展示了使用CSS創建樹形結構的樣式代碼。需要注意的是，樣式要適用于所有的菜單項。此代碼使每個子級列表項向右縮進，并通過使用偽元素來顯示垂直和水平線條以創建樹形結構并手動設置邊緣。

使用樹形結構不僅可以創建具有層級結構的導航菜單和文件目錄，還可以在顯示大量數據時提供更好的用戶體驗。例如，可以創建一個可折疊的樹形菜單來顯示項目和子任務。