CSS制作樹狀菜單可以通過多個方法實現，但基本上都會用到以下幾個步驟：

1. HTML結構：樹型結構的菜單通常是通過HTML樹型結構來實現的。我們可以使用ul和li標簽來構建這樣的結構。

<ul>
<li>第1級菜單</li>
<li>第1級菜單
<ul>
<li>第2級菜單</li>
<li>第2級菜單</li>
</ul>
</li>
</ul>

2. CSS樣式：我們可以使用CSS來為我們的菜單添加樣式，使其成為樹狀菜單。下面是樣式代碼示例：

// 去除默認樣式
ul,li{
list-style:none;
margin:0;
padding:0;
}
// 一級菜單樣式
li{
line-height: 30px;
padding-left:10px;
}
// 二級及以下菜單樣式
li ul li{
padding-left:20px;
}
// 打開和關閉菜單的圖標，可自行修改
.open {
background-image: url('../image/icon-open.png');
background-position: left center;
background-repeat: no-repeat;
}
.close {
background-image: url('../image/icon-close.png');
background-position: left center;
background-repeat: no-repeat;
}

3. JavaScript代碼：我們還可以使用JavaScript代碼來實現樹狀菜單的打開和關閉功能，下面是示例代碼：

// 獲取所有菜單項
const menuItems = document.querySelectorAll('li')
// 為菜單項添加打開和關閉菜單的事件
menuItems.forEach(item => {
// 查找子菜單
const subMenu = item.querySelector('ul')
// 如果存在子菜單，添加事件
if (subMenu) {
const icon = document.createElement('i')
icon.classList.add('close')
item.prepend(icon)
item.addEventListener('click', () => {
subMenu.classList.toggle('open')
icon.classList.toggle('open')
icon.classList.toggle('close')
})
}
})

至此，我們就成功地使用HTML、CSS和JavaScript代碼制作了一個簡單的樹狀菜單。通過適當的修改代碼，我們可以制作出更加復雜和美觀的菜單。