树形菜单是一种层级结构化的菜单，常用于展示复杂的信息结构。在web前端开发中，树形菜单可以通过多种方式实现，本文将介绍一种使用HTML、CSS和JavaScript实现树形菜单的 。
HTML结构
树形菜单的HTML结构可以表示为一个无序列表（），其中每个列表项（）代表一个菜单项。菜单项可以包含子菜单，子菜单使用另一个无序列表嵌套在父菜单项中。例如：
html
菜单项1
子菜单项1
子菜单项2
菜单项2
CSS样式
要设置树形菜单的样式，可以在CSS中定义无序列表和列表项的样式。例如，可以设置列表项的显示模式为inline-block，并设置其边距和内边距以创建菜单项之间的间距。
css
ul {
list-style-type: none;
display: flex;
}
li {
display: inline-block;
margin: 10px;
padding: 10px;
}
JavaScript交互
要使树形菜单可交互，需要使用JavaScript添加事件监听器。可以添加一个点击事件监听器，当点击菜单项时，显示或隐藏其子菜单。例如：
javascript
const menuItems = document.querySelectorAll('li');
menuItems.forEach(item => {
item.addEventListener('click', () => {
const submenu = item.querySelector('ul');
submenu.classList.toggle('hidden');
});
});
通过使用HTML、CSS和JavaScript，可以轻松地在web前端中实现树形菜单。这种类型的菜单可以有效地组织和展示信息，并增强用户体验。
