HTML多级菜单主要通过`和标签嵌套实现层级结构，如一级菜单内嵌套二级，逐级扩展，样式上，常用CSS控制布局（如flex、position）和交互（如:hover悬停显示子菜单，display`切换显隐），JavaScript可增强交互体验（如点击展开/折叠），核心是利用列表嵌套构建层级，结合CSS实现视觉呈现与动态效果，确保多级菜单清晰、易用，适用于网站导航等场景。
HTML多级菜单：使用li标签构建层级导航的实用指南
在网页设计中,导航菜单是用户获取信息、浏览页面的核心组件，当网站内容层级较深时，多级菜单（又称"下拉菜单"或"嵌套菜单"）能够帮助用户快速定位目标，同时保持页面布局的简洁美观，本文将详细介绍如何使用HTML的<li>标签结合CSS和JavaScript，从零开始构建功能完善、样式美观的多级菜单，并提供多种实用技巧和最佳实践。
多级菜单的核心：HTML <li> 标签的嵌套结构
多级菜单的本质是"列表的嵌套"，即通过<ul>（无序列表）和<li>（列表项）标签构建层级关系。<li>标签既是菜单项的容器，也是承载子菜单的载体，一个基础的多级菜单HTML结构如下：
<nav>
<ul class="menu">
<li><a href="#home">首页</a></li>
<li class="dropdown">
<a href="#products">产品</a>
<!-- 二级菜单：嵌套在一级菜单项的<li>内 -->
<ul class="submenu">
<li><a href="#product1">产品分类1</a></li>
<li><a href="#product2">产品分类2</a></li>
<li class="dropdown">
<a href="#product3">产品分类3</a>
<!-- 三级菜单：嵌套在二级菜单项的<li>内 -->
<ul class="submenu">
<li><a href="#sub1">子分类1</a></li>
<li><a href="#sub2">子分类2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#services">服务</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
关键点解析：
<ul class="menu">：一级菜单容器，通过class标识层级。<li class="dropdown">：包含子菜单的一级菜单项，dropdown类用于标记"可展开项"。- 嵌套的
<ul class="submenu">：二级/三级菜单容器，直接作为<li>的子元素，形成层级嵌套。
CSS样式：让多级菜单"立"起来
纯HTML结构的多级菜单是"平铺"的，需要CSS实现"显示/隐藏"、"定位"、"样式美化"等效果，以下是核心CSS代码及解析：
基础样式：重置默认样式，设置菜单布局
/* 重置列表样式，去除默认缩进和圆点 */
.menu, .submenu {
list-style: none;
margin: 0;
padding: 0;
}
/* 一级菜单横向排列（常见于顶部导航） */
.menu {
display: flex;
background-color: #333;
font-family: Arial, sans-serif;
}
/* 一级菜单项样式 */
.menu > li {
position: relative; /* 为子菜单定位提供参考 */
}
.menu > li > a {
display: block;
padding: 15px 20px;
color: white;
text-decoration: none;
transition: background-color 0.3s ease;
}
/* 鼠标悬停时背景色变化 */
.menu > li > a:hover {
background-color: #555;
}
子菜单显示与定位：实现"下拉"效果
/* 默认隐藏二级及以下菜单 */
.submenu {
display: none;
position: absolute; /* 相对于父级<li>定位 */
top: 100%; /* 父菜单项下方 */
left: 0;
background-color: #444;
min-width: 200px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
z-index: 1000;
}
/* 鼠标悬停在父级<li>时显示子菜单 */
.dropdown:hover > .submenu {
display: block;
}
/* 二级菜单项样式 */
.submenu > li > a {
display: block;
padding: 12px 15px;
color: white;
text-decoration: none;
transition: background-color 0.3s ease;
}
.submenu > li > a:hover {
background-color: #666;
}
多级嵌套：支持三级及以上菜单
/* 三级菜单样式（嵌套在二级菜单内） */
.submenu .submenu {
top: 0;
left: 100%; /* 显示在二级菜单右侧 */
}
/* 鼠标悬停在二级菜单的.dropdown项时显示三级菜单 */
.submenu .dropdown:hover > .submenu {
display: block;
}
样式效果说明：
position: relative（父级<li>）：为子菜单的absolute定位提供"参考点"，确保子菜单相对于父菜单项定位。display: none/block：通过hover伪类控制子菜单的显示/隐藏，实现"悬停下拉"效果。position: absolute：使子菜单脱离文档流，可以精确定位在父菜单项的下方或右侧。z-index：确保菜单始终显示在其他元素之上，避免被遮挡。
增强用户体验：添加图标和动画效果
使用图标增强菜单可读性
<li class="dropdown">
<a href="#products">
<i class="fas fa-box"></i> 产品
</a>
<ul class="submenu">
<li><a href="#product1"><i class="fas fa-laptop"></i> 电子产品</a></li>
<li><a href="#product2"><i class="fas fa-tshirt"></i> 服装配饰</a></li>
<li class="dropdown">
<a href="#product3">
<i class="fas fa-home"></i> 家居用品
</a>
<ul class="submenu">
<li><a href="#sub1"><i class="fas fa-couch"></i> 客厅家具</a></li>
<li><a href="#sub2"><i class="fas fa-bed"></i> 卧室家具</a></li>
</ul>
</li>
</ul>
</li>
添加平滑过渡动画
/* 为子菜单添加平滑显示动画 */
.submenu {
display: none;
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
}
.dropdown:hover > .submenu {
display: block;
opacity: 1;
transform: translateY(0);
}
/* 为菜单项添加悬停动画 */
.menu > li > a, .submenu > li > a {
position: relative;
overflow: hidden;
}
.menu > li > a::after, .submenu > li > a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #fff;
transition: width 0.3s ease;
}
.menu > li > a:hover::after, .submenu > li > a:hover::after {
width: 100%;
}
响应式多级菜单：移动端适配
添加移动端汉堡菜单
<div class="menu-toggle">
<span></span>
<span></span>
<span></span>
</div>
<nav class="mobile-nav">
<ul class="menu">
<!-- 原有菜单内容 -->
</ul>
</nav>
响应式CSS样式
/* 移动端样式 */
@media (max-width: 768px) {
.menu {
display: none;
flex-direction: column;
position: absolute;
top:
