Bootstrap如何实现响应式的二级下拉菜单（Multi-level）-Bootstrap教程-PHP中文网

bootstrap 5 默认不支持二级下拉菜单，是框架主动移除而非配置错误；需手动补足 position: relative 定位、hover/click 双触发逻辑、z-index 层级及 aria 键盘导航支持。

bootstrap 5 默认不支持二级下拉菜单，这不是配置问题，而是框架主动移除——dropdown-menu 嵌套在另一个 dropdown-menu 内时，js 不初始化、css 不触发显隐、移动端点击即收起。必须手动补定位、事件和可访问性逻辑。

为什么 `.dropdown-item:hover .dropdown-menu` 死活不显示

常见现象：HTML 结构看着没问题，但二级菜单始终空白或飞出视口。核心原因有两个：

.dropdown-item 缺少 position: relative，导致子 .dropdown-menu 的 left: 100% 相对于定位，直接跑出屏幕
Bootstrap 5 默认给 .dropdown-menu .dropdown-menu 加了 opacity: 0 和 visibility: hidden，而纯 :hover 规则只改 display，样式被覆盖
没删掉默认的 display: none 冲突项，浏览器渲染时仍以它为准

必须加的最小 CSS（不能省）：

.dropdown-item {
  position: relative;
}
.dropdown-menu .dropdown-menu {
  position: absolute;
  top: 0;
  left: 100%;
  margin-top: -2px;
  display: none;
}
.dropdown-item:hover > .dropdown-menu,
.dropdown-item:focus > .dropdown-menu {
  display: block;
}

如何让二级菜单在桌面端 hover 展开、移动端 click 展开

纯 :hover 在触摸设备和键盘导航中失效；纯 JS click 又破坏桌面悬停体验。推荐混合方案：

桌面端保留 :hover + focus 触发，满足鼠标和 Tab 键导航
移动端监听 click，并阻止冒泡，避免触发父级 dropdown 的自动收起
给二级触发项（如 <a class="dropdown-item dropdown-submenu-toggle"></a>）加自定义类，不混用 data-bs-toggle="dropdown"，否则 JS 初始化冲突
二级菜单容器必须是 .dropdown-item 的**直接子元素**，不能是兄弟节点，否则选择器或事件委托失效

关键 JS 片段（仅需监听 click，不接管 hover）：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

document.addEventListener('click', function(e) {
  if (e.target.matches('.dropdown-submenu-toggle')) {
    e.preventDefault();
    e.stopPropagation();
    const submenu = e.target.nextElementSibling;
    if (submenu && submenu.classList.contains('dropdown-menu')) {
      submenu.classList.toggle('show');
    }
  } else if (!e.target.closest('.dropdown-submenu, .dropdown-submenu-toggle')) {
    document.querySelectorAll('.dropdown-menu.dropdown-submenu.show').forEach(el => el.classList.remove('show'));
  }
});

`z-index`、定位偏移与响应式断裂怎么防

二级菜单常被遮盖、右侧弹出错位、小屏下溢出，本质是层级和定位没对齐：

.dropdown-menu 默认 z-index: 1000，二级菜单至少设 z-index: 1001，否则被同级菜单盖住
想往右贴着展开？别信 data-bs-popper="right" —— Bootstrap 5 不识别这个属性，必须用 CSS 强制：.dropdown-submenu .dropdown-menu { left: 100%; top: 0; }
鼠标从一级移到二级菜单途中闪退？不是 JS bug，是 mouseleave 触发太急 —— 给二级菜单加 margin-left: -4px 补间隙，或用 setTimeout(..., 200) 延迟 hide
响应式断点下定位偏移？别依赖 dropend 类传导 —— 它只作用于一级，二级必须单独写媒体查询适配