如何在 HTML 中实现多级下拉菜单（Dropdown Submenu）-html教程-PHP中文网

如何在 HTML 中实现多级下拉菜单（Dropdown Submenu）

本文详解如何基于纯 html + css 实现嵌套式下拉子菜单（二级菜单），无需 javascript，通过相邻兄弟选择器（`+`）和 `:hover` 状态精准控制显示逻辑，并提供可直接运行的完整代码与关键注意事项。

要为现有下拉菜单添加子菜单（即二级菜单），核心在于结构嵌套 + CSS 精准定位 + 邻居选择器触发。原代码中 .dropdown-content 仅包含标签，无法承载子菜单；我们需要将某个菜单项（如第一个 level_1）与其对应的子菜单

设为相邻兄弟元素，再利用 a:hover + .sub-1 规则实现悬停展开。

以下是优化后的完整实现：

✅ HTML 结构（关键：相邻兄弟关系）


  
  
    
    level_1 (has submenu)
    
      level_11
      level_12
      level_13
    

    
    level_1
    level_1

✅ 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; }
}