本文介绍一种纯 css 实现的二级下拉菜单方案，无需 javascript，通过相邻兄弟选择器（`+`）触发子菜单显示，兼容主流浏览器，并保持原有 dropdown 结构简洁可维护。

要为现有下拉菜单添加嵌套子菜单（即二级菜单），关键在于利用 CSS 相邻兄弟选择器 + 实现“悬停某项时显示其后紧邻的 .sub-1 容器”，而非依赖 :hover 作用于父容器（那样会导致所有子菜单同时展开）。该方法语义清晰、性能良好，且完全基于原生 HTML/CSS。

✅ 正确结构：子菜单必须是 的紧邻后续兄弟元素

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 (可展开)</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：精准控制显示逻辑

以下 CSS 实现了「仅当悬停特定 时，才显示其后 .sub-1」的效果：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

/* 所有子菜单默认隐藏 */
.dropdown-content .sub-1,
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  z-index: 1;
}

/* 主菜单项悬停样式 */
.dropdown-content a:hover {
  background-color: #e0e0e0;
  color: #0F4391;
}

/* 关键：悬停第1个菜单项时，显示其后紧邻的 .sub-1 */
.dropdown-content a:nth-child(1):hover + .sub-1 {
  display: block;
  margin-left: 160px;   /* 水平右移，形成嵌套视觉 */
  margin-top: -36px;     /* 微调垂直对齐（根据行高调整） */
  top: 0;                /* 确保定位基准一致 */
  left: 100%;            /* 更健壮的定位方式（推荐替代 margin-left） */
}

/* 可选：为子菜单项增加左缩进或边框增强层级感 */
.sub-1 a {
  padding-left: 24px; /* 缩进体现层级 */
  border-left: 3px solid #0F4391;
}

⚠️ 重要注意事项：:nth-child(1) 仅适用于第一个菜单项；若需为多个项添加子菜单，请改用类名（如 ）并配合 .has-submenu:hover + .sub-1。子菜单 .sub-1 必须紧跟在 后面，中间不能有空格、注释或其它标签，否则 + 选择器失效。移动端适配需额外处理：.sub-1 在响应式断点中建议设为 position: static 或 display: block，避免绝对定位导致布局错乱。如需支持三级菜单，可递归套用 .sub-2 和 a:hover + .sub-2，但层级过深会降低可用性，建议谨慎使用。

✅ 最佳实践建议

• 使用语义化类名（如 .dropdown-item, .submenu）替代 .sub-1，提升可读性与可维护性；
• 为无障碍访问添加 aria-haspopup="true" 和 aria-expanded 属性（需配合少量 JS 动态控制）；
• 在生产环境启用 CSS 前缀自动补全（如 Autoprefixer），确保旧版浏览器兼容性。

通过上述结构与样式组合，你即可在不引入框架或脚本的前提下，稳定实现符合设计图（右侧弹出嵌套菜单）的专业级下拉导航。

立即学习“前端免费学习笔记（深入）”；