CSS樹形菜單是一種非常常見的頁面導航樣式，具有清晰簡潔的特點，可以讓用戶快速找到所需的內容。下面是一段基于CSS實現樹形菜單的代碼：

/* 樹形菜單樣式 */
.tree {
margin-left: 20px;
}
/* 一級節點樣式 */
.tree >ul >li {
list-style-type: none;
margin-left: -20px;
position: relative;
padding-left: 20px;
}
/* 子節點樣式 */
.tree ul ul li:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
width: 20px;
margin-right: -20px;
}
/* 節點展開/折疊箭頭樣式 */
.tree .toggle:before {
content: "\f078";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #999;
margin-right: 10px;
}
.tree li.hasChildren >.toggle:before {
content: "\f054";
}
/* 子節點樣式 */
.tree >ul >li >ul {
display: none;
}
.tree >ul >li.active >ul {
display: block;
}
/* 菜單hover樣式 */
.tree >ul >li:hover >a {
color: #1abc9c;
}
/* 菜單選中樣式 */
.tree >ul >li.active >a {
color: #1abc9c;
font-weight: bold;
}
/* 遞歸子節點樣式 */
.tree li.hasChildren.expanded >ul {
display: block;
}
.tree li.hasChildren.collapsed >ul {
display: none;
}

這段代碼實現了樹形菜單的基本樣式，其中一級節點、子節點、展開/折疊箭頭、菜單hover/選中樣式，都有相應的樣式設置。此外，還使用了FontAwesome字體庫，用于顯示展開/折疊箭頭。同時，這段代碼還實現了子節點的遞歸遍歷樣式，使得樹形菜單可以展開多層子節點。