今天我們來學習一下如何使用CSS來實現一個樹形菜單。 首先，我們需要在HTML中設置一個基本的結構，比如：

<ul id="tree-menu">
<li>
<a href="#">父菜單 1</a>
<ul>
<li><a href="#">子菜單 1</a></li>
<li><a href="#">子菜單 2</a></li>
</ul>
</li>
<li>
<a href="#">父菜單 2</a>
<ul>
<li><a href="#">子菜單 3</a></li>
<li><a href="#">子菜單 4</a></li>
</ul>
</li>
</ul>

然后，我們需要使用CSS來對這個基本結構進行樣式設置。首先，我們需要將所有的子菜單隱藏起來：

#tree-menu ul {
display: none;
}

然后，我們需要對所有的父菜單添加樣式，讓它們具有可點擊的樣式，并且在菜單展開時進行相應的擴展：

#tree-menu li a {
padding-left: 20px;
display: block;
position: relative;
}
#tree-menu li a:before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ccc;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
#tree-menu li.active >a:before {
background: #f00;
}
#tree-menu li.has-child >a:before {
content: '+';
color: #333;
font-size: 20px;
line-height: 100%;
}
#tree-menu li.active.has-child >a:before {
content: '-';
}
#tree-menu li.has-child >ul {
margin-left: 10px;
}

最后，我們來寫一下JavaScript代碼，實現菜單的交互效果：

const treeMenu = document.querySelector('#tree-menu');
treeMenu.addEventListener('click', event =>{
const target = event.target;
if (target.tagName === 'A') {
event.preventDefault();
const parent = target.parentNode;
if (parent.classList.contains('has-child')) {
parent.classList.toggle('active');
}
if (typeof event.stopPropagation === 'function') {
event.stopPropagation();
}
}
});

好了，我們現在已經完成了一個基本的樹形菜單了。希望這個小示例能夠幫助你更好地理解CSS的使用。