使用HTML嵌套列表构建多级导航结构，通过CSS实现水平布局与下拉显示效果，结合position定位与:hover交互，确保菜单层级清晰、展开准确，适用于桌面端多级导航需求。
实现多层嵌套的导航栏，关键在于使用HTML结构清晰地表达层级关系，并通过CSS控制显示效果。常见场景是下拉菜单或多级子菜单，适用于网站主导航或管理后台。
HTML结构设计
使用无序列表 ul 和列表项 li 构建嵌套结构，每一层子菜单放在父级的 li 内部。
CSS基础样式与布局
将导航栏设为水平排列，隐藏子菜单，鼠标悬停时显示。
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
nav a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b333;
}
nav ul ul {
position: absolute;
top: 100%;
left: 0;
background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
border: 1px solid https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bccc;
display: none;
}
nav ul ul ul {
left: 100%;
top: 0;
}
nav li:hover > ul {
display: block;
}
交互优化与细节处理
确保多级菜单定位准确，避免被遮挡，提升可用性。
立即学习“前端免费学习笔记（深入）”；
- 外层 nav 设置 position: relative，确保子菜单基于其定位
- 二级菜单用 top: 100% 紧贴父菜单底部
- 三级及以上菜单用 left: 100% 向右展开
- 添加 min-width 防止菜单过窄
- 使用 :hover 触发显示，适合桌面端；移动端建议改用点击展开
