<div>樹狀菜單是一種常用的網頁導航形式，可以展示出層級結構的關系，讓用戶方便地查看和選擇不同的選項。在網頁開發中，我們可以使用<div>標簽來創建一個樹狀菜單。
下面是幾個使用<div>標簽創建樹狀菜單的代碼案例，幫助讀者更好地理解和使用這一功能。
是一個簡單的樹狀菜單示例，代碼如下：

這是一個簡單的樹狀菜單：

<div>
<ul>
<li>選項1</li>
<li>選項2</li>
<li>選項3</li>
</ul>
</div>

這段代碼中，我們使用<div>標簽包括了一個<ul>標簽，里面有三個<li>標簽作為選項。通過CSS樣式的設置，我們可以將這些選項以樹狀菜單的形式展示在網頁上。
接下來是一個使用CSS樣式控制樹狀菜單的案例，代碼如下：

使用CSS控制樹狀菜單的樣式：

<style>
.tree-menu {
list-style-type: none;
padding: 0;
margin: 0;
}
<br>
    .tree-menu li {
margin-left: 20px;
}
</style>
<br>
<div>
<ul class="tree-menu">
<li>選項1</li>
<li>選項2</li>
<li>選項3</li>
</ul>
</div>

在這個例子中，我們為樹狀菜單添加了一個名為.tree-menu的CSS類，通過設置這個類的樣式，我們可以改變樹狀菜單的外觀。在這個樣式中，我們設置了<ul>元素的padding和margin為0，這樣可以去除默認的內外邊距。同時，我們設置了每個<li>元素的左邊距為20px，這樣可以創建出層級結構的效果。
最后是一個動態生成樹狀菜單的案例，代碼如下：

動態生成樹狀菜單：

<div id="tree-menu"></div>
<br>
<script>
var menuData = [
{name: "選項1", children: [
{name: "子選項1"},
{name: "子選項2"},
{name: "子選項3"}
]},
{name: "選項2"},
{name: "選項3"}
];
<br>
    function buildMenu(data, parent) {
var ul = document.createElement("ul");
<br>
        for (var i = 0; i < data.length; i++) {
var li = document.createElement("li");
li.textContent = data[i].name;
<br>
            if (data[i].children) {
buildMenu(data[i].children, li);
}
<br>
            ul.appendChild(li);
}
<br>
        parent.appendChild(ul);
}
<br>
    buildMenu(menuData, document.getElementById("tree-menu"));
</script>

這個例子中，我們通過JavaScript動態生成了樹狀菜單。，我們定義了一個數組menuData，表示菜單的數據結構。然后，我們編寫了一個函數buildMenu，遞歸地創建菜單的DOM結構。最后，我們調用buildMenu函數，將菜單數據和目標父元素傳遞進去，菜單就會被生成并添加到指定的容器中。
通過以上幾個案例的介紹，我們可以看到<div>標簽是一個非常靈活和強大的工具，可以幫助我們創建各種不同類型的樹狀菜單。無論是靜態還是動態的，通過適當的CSS樣式和JavaScript代碼，我們都可以實現出功能完善、美觀的樹狀菜單。希望這些例子能夠幫助讀者更好地理解和應用<div>樹狀菜單。