Bootstrap多级下拉菜单怎么实现

如果你明确只面向桌面用户、且接受 hover 触发（非点击），可以用纯 CSS 控制二级菜单显隐。关键是利用 .dropdown:hover .dropdown-menu 这类嵌套选择器，并修正定位层级。

需确保 HTML 结构满足：二级 .dropdown-menu 是一级 .dropdown-item 的直接子元素（不是兄弟节点），否则选择器不匹配。

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">产品</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Web 应用</a></li>
    <li class="dropdown">
      <a class="dropdown-item dropdown-toggle" href="#">移动应用</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">iOS</a></li>
        <li><a class="dropdown-item" href="#">Android</a></li>
      </ul>
    </li>
  </ul>
</li>

对应关键 CSS：

.dropdown-menu .dropdown-menu {
  margin-left: 100%;
  top: 0;
  left: -1px;
  display: none;
}
.dropdown-menu .dropdown:hover > .dropdown-menu {
  display: block;
}
.dropdown-menu .dropdown-menu .dropdown:hover > .dropdown-menu {
  display: block;
}

• margin-left: 100% 让二级菜单紧贴一级右侧，比 left: 100% 更稳定（不受父容器 padding 干扰）
• 必须用 > 子选择器限定层级，避免三级菜单被错误触发
• 移动端仍会显示二级菜单（因无 hover），需配合 @media (hover: hover) 条件包裹上述规则

点击展开 + 键盘可访问的兼容方案

要真正符合无障碍（a11y）和移动端需求，必须引入轻量 JS 控制 show 类，并补全焦点管理。CSS 只负责样式和过渡，不承担逻辑。

核心思路：监听一级菜单项的 click 和 keydown（Enter/Space），手动切换二级 .dropdown-menu 的 show 类，并设置 aria-expanded 状态。

document.querySelectorAll('.dropdown-item.dropdown-toggle').forEach(el => {
  el.addEventListener('click', e => {
    e.preventDefault();
    const submenu = el.nextElementSibling;
    if (submenu && submenu.classList.contains('dropdown-menu')) {
      submenu.classList.toggle('show');
      el.setAttribute('aria-expanded', submenu.classList.contains('show'));
    }
  });
});

• 必须为 .dropdown-toggle 元素添加 role="button" 和 tabindex="0"
• 二级 .dropdown-menu 需设 role="menu"，内部项设 role="menuitem"
• CSS 中保留 .dropdown-menu.show { display: block }，但不再依赖 :hover
• 移动端 Safari 对 click 有 300ms 延迟，建议用 touchstart 替代或引入 fastclick

容易被忽略的响应式与 z-index 问题

多级菜单在小屏幕折叠后，常出现二级菜单被遮挡、或展开区域超出视口。这不是 JS 逻辑问题，而是 CSS 层叠上下文和定位失控导致的。

• .dropdown-menu 默认 z-index: 1000，但若父容器有 transform、filter 或 will-change，会创建新层叠上下文，导致二级菜单被压在下面 —— 检查父级是否意外触发了这些属性
• 在 @media (max-width: 991.98px) 下，Navbar 折叠为汉堡菜单时，所有 .dropdown-menu 应强制设为 position: static; display: block，否则绝对定位会脱离文档流
• 使用 data-bs-display="static" 可禁用 Popper 定位，但仅适用于已知尺寸的静态菜单；动态内容仍需 Popper，此时必须确保 data-bs-boundary 设为 'viewport' 防止溢出

最麻烦的其实是焦点逃逸：当键盘用户按 Tab 进入二级菜单后，Shift+Tab 本该回到上一级 toggle，但默认行为会跳到整个页面下一个可聚焦元素。这个细节没人提，但 WCAG 2.1 要求必须修复。

终于介绍完啦！小伙伴们，这篇关于《Bootstrap多级下拉菜单怎么实现》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！