創(chuàng)建樹(shù)形菜單是CSS中的一個(gè)常見(jiàn)應(yīng)用，它可以讓你的網(wǎng)站導(dǎo)航更加清晰、易于使用，在CSS中，我們可以使用列表（List）來(lái)創(chuàng)建樹(shù)形菜單，結(jié)合CSS的樣式和JavaScript的交互，可以實(shí)現(xiàn)樹(shù)形菜單的展開(kāi)和收起功能。

我們需要?jiǎng)?chuàng)建一個(gè)HTML列表，用于表示樹(shù)形菜單的結(jié)構(gòu)，可以使用無(wú)序列表（ul）或有序列表（ol），根據(jù)具體需求選擇，我們可以創(chuàng)建一個(gè)包含兩個(gè)子菜單的列表：

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

我們需要使用CSS來(lái)設(shè)置樹(shù)形菜單的樣式，可以設(shè)置列表項(xiàng)（li）的顯示方式、顏色、字體等屬性，我們可以將子菜單設(shè)置為隱藏狀態(tài)，并在鼠標(biāo)懸停時(shí)顯示：

#tree-menu ul {
  display: none;
}
#tree-menu li:hover ul {
  display: block;
}

我們可以使用JavaScript來(lái)添加交互功能，可以使用JavaScript監(jiān)聽(tīng)點(diǎn)擊事件，并在點(diǎn)擊時(shí)展開(kāi)或收起子菜單：

document.getElementById('tree-menu').addEventListener('click', function(event) {
  var target = event.target;
  if (target.tagName === 'LI') {
    var ul = target.querySelector('ul');
    if (ul) {
      ul.style.display = ul.style.display === 'none' ? 'block' : 'none';
    }
  }
});

通過(guò)以上步驟，我們就可以在CSS中創(chuàng)建出具有展開(kāi)和收起功能的樹(shù)形菜單了。