HTML5樹形菜單代碼

HTML5樹形菜單是一種非常方便實用的菜單方式，可以通過嵌套列表的方式構建，代碼如下：

<ul>
<li>菜單1</li>
<li>菜單2
<ul>
<li>子菜單1</li>
<li>子菜單2
<ul>
<li>子子菜單1</li>
<li>子子菜單2</li>
</ul>
</li>
</ul>
</li>
<li>菜單3</li>
</ul>

通過嵌套<ul>和<li>標簽可以實現多級菜單，其中子菜單和子子菜單通過縮進實現層次效果。

為了讓菜單更加美觀，可以對<li>和<ul>進行樣式設置，比如設置背景色、邊框、字體等等。

li {
background-color: #EEE;
border: 1px solid #CCC;
padding: 5px;
font-size: 14px;
font-weight: bold;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul ul {
margin-left: 20px;
}

通過樣式設置，可以將菜單變得更加漂亮。

除了嵌套列表，HTML5樹形菜單還可以通過JavaScript代碼實現，比如使用jQuery插件實現，代碼如下：

$(function() {
$('li:has(ul)').addClass('parent');
$('li.parent >ul').hide();
$('li.parent').click(function() {
$(this).children('ul').toggle();
});
});

通過添加類名、隱藏子菜單、添加點擊事件實現菜單的展開和收起效果。

總之，HTML5樹形菜單是一種非常方便實用的菜單方式，適用于各種網站，開發者可以根據需求選擇使用列表嵌套方式或JavaScript方式實現。