如何用Bootstrap做多级下拉菜单-Bootstrap教程-PHP中文网

bootstrap 5 默认不支持多级下拉菜单，需手动实现悬停逻辑、右侧定位、键盘导航及无障碍支持。

如何用bootstrap做多级下拉菜单

Bootstrap 5 默认不支持多级下拉菜单

Bootstrap 5 官方移除了对二级以上下拉菜单（即“下拉里再下拉”）的 CSS 支持和 JS 行为，dropdown-menu 子项里的 dropdown-menu 默认是隐藏且无法触发的。这不是你写错了，是框架故意没做——官方认为多级菜单在移动端体验差、可访问性弱，所以直接砍掉了。

如果你确实需要三级菜单（比如后台系统导航），就得自己补逻辑，不能只靠 data-bs-toggle="dropdown" 堆嵌套。

手动激活二级下拉需监听 mouseenter/mouseleave

Bootstrap 5 的 Dropdown 实例默认只响应一级点击或聚焦，子菜单得靠事件委托 + 手动 show()/hide() 控制。关键不是加更多 data-bs-* 属性，而是接管悬停逻辑。

必须给二级 dropdown-menu 的父 li 加 class="dropdown-submenu" 这类自定义 class，方便选择器定位
监听父 li.dropdown-submenu 的 mouseenter，调用子 dropdown 的 show() 方法
监听整个 .dropdown-menu 的 mouseleave，延迟 200ms 再 hide()，避免光标经过间隙时闪退
移动端仍需保留点击逻辑（click 事件），否则触屏用户点不开

示例片段：

VPS Bootstrap

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

下载

const subMenus = document.querySelectorAll('.dropdown-submenu');
subMenus.forEach(el => {
  const subMenu = el.querySelector('.dropdown-menu');
  const dropdown = new bootstrap.Dropdown(subMenu);
  
  el.addEventListener('mouseenter', () => dropdown.show());
  el.addEventListener('mouseleave', () => setTimeout(() => dropdown.hide(), 200));
});

`dropdown-menu` 右侧弹出需覆盖 CSS 并修正箭头位置

默认所有 dropdown-menu 都从下方展开，二级菜单想往右贴着显示，光加 data-bs-popper="right" 没用——Bootstrap 5 不认这个属性，且 Popper 配置被封装在 JS 里，不能直接改。

必须用 CSS 强制定位：.dropdown-submenu .dropdown-menu { position: absolute; top: 0; left: 100%; margin-top: -6px; }
原生下拉箭头（::before）会错位，得重置：.dropdown-submenu .dropdown-menu::before { display: none; }
如果父菜单用了 dropend 类，它只影响一级，对子菜单无效，别指望靠它自动传导
注意 z-index：二级菜单的 z-index 必须高于一级，否则被盖住，建议设为 1001 或更高