多级下拉菜单实现教程分享
时间：2026-01-21 16:39:39 238浏览 收藏
积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《HTML 实现多级下拉菜单，简单教程分享》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~
本文详解如何基于纯 HTML + CSS 实现嵌套式下拉子菜单（二级菜单），无需 JavaScript，通过相邻兄弟选择器（`+`）和 `:hover` 状态精准控制显示逻辑，并提供可直接运行的完整代码与关键注意事项。
要为现有下拉菜单添加子菜单（即二级菜单），核心在于结构嵌套 + CSS 精准定位 + 邻居选择器触发。原代码中 .dropdown-content 仅包含 标签，无法承载子菜单；我们需要将某个菜单项（如第一个 level_1）与其对应的子菜单 以下是优化后的完整实现：✅ HTML 结构（关键：相邻兄弟关系）
<div class="dropdown" id="myDropdown">
<button class="dropbtn">
<i style="font-size:24px" class="fa"></i> level_0
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- 第一个菜单项 + 紧邻的子菜单容器 -->
<a href="#">level_1 (has submenu)</a>
<div class="sub-1">
<a href="#">level_11</a>
<a href="#">level_12</a>
<a href="#">level_13</a>
</div>
<!-- 其他普通菜单项 -->
<a href="#">level_1</a>
<a href="#">level_1</a>
</div>
</div>✅ CSS 样式（重点：定位与悬停逻辑）
.dropdown .dropbtn {
border: none;
outline: none;
color: #0F4391;
padding: 8.5px 15px;
background-color: inherit;
font-family: inherit;
cursor: pointer;
}
.dropdown-content,
.sub-1 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
z-index: 1000;
}
.dropdown-content a,
.sub-1 a {
color: #0F4391;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* 主菜单悬停时显示一级菜单 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 关键：当第一个菜单项被悬停时，显示其后紧邻的 .sub-1 */
.dropdown-content a:nth-child(1):hover + .sub-1 {
display: block;
margin-left: 160px; /* 向右偏移，避免重叠 */
margin-top: -36px; /* 微调垂直对齐（= a 的 height ≈ 12+12+12=36px） */
top: 0; /* 保证顶部对齐 */
}
/* 子菜单自身也支持悬停高亮（可选增强体验） */
.sub-1 a:hover {
background-color: #e0e0e0;
color: #000;
}
/* 响应式兼容：移动端需关闭子菜单自动展开（因触摸无 hover） */
@media screen and (max-width: 600px) {
.sub-1 { display: none !important; }
}⚠️ 注意事项与最佳实践
或 会破坏 + 选择器）。
