Bootstrap 5 默认不支持多级下拉菜单，需手动补全CSS定位与JS交互逻辑，并增强可访问性支持。
Bootstrap 5 默认不支持多级下拉菜单
Bootstrap 5 官方移除了对多级（三级及以上）下拉菜单的原生支持，dropdown-menu 嵌套在另一个 dropdown-menu 内时，子菜单默认不显示、无 hover/click 触发逻辑，且 CSS 未定义定位偏移。这不是你写错了，是框架故意没做。
常见错误现象：Dropdown 点开后二级菜单可见，但鼠标一移向二级项就立即关闭；或者三级 dropdown-menu 完全不出现、被裁剪、z-index 错乱。
- 必须手动补全 CSS 定位：二级菜单需相对父
dropdown-item定位，而非整个dropdown-menu - 必须用 JS 控制显隐逻辑，尤其要阻止事件冒泡和延迟关闭（避免“划过即关”）
- 移动端点击穿透问题：iOS Safari 下 touchstart 和 click 时序易导致意外关闭，建议统一用
click+preventDefault处理
用 CSS 实现二级+菜单定位与展开方向
关键不是加更多 class，而是覆盖 Bootstrap 的默认定位行为。二级菜单默认会 absolute 定位到父 dropdown-menu 左上角，需改为 relative 到触发它的 dropdown-item。
示例核心 CSS（适配 Bootstrap 5.3+）：
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
margin-left: 0;
}
.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus > .dropdown-menu,
.dropdown-submenu > .dropdown-menu.show {
display: block;
}
-
.dropdown-submenu必须包裹<a class="dropdown-item"></a>和其后的<ul class="dropdown-menu"></ul> -
left: 100%让二级菜单紧贴右侧展开；若需向下二级（如顶部导航），改用top: 100% - 不要依赖
:hover在移动端——它不可靠，后续 JS 需接管
用纯 JavaScript 补齐多级菜单交互逻辑
Bootstrap 的 Dropdown 插件只管一级，嵌套菜单的 show/hide 必须自己监听并控制。重点是解决“划过即关”和“点击穿透”两个问题。
最小可用 JS 片段（无需 jQuery）：
document.querySelectorAll('.dropdown-submenu a[data-bs-toggle="dropdown"]').forEach(el => {
el.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
const parentLi = this.closest('.dropdown-submenu');
const subMenu = parentLi.querySelector('.dropdown-menu');
const allSubMenus = document.querySelectorAll('.dropdown-submenu .dropdown-menu');
// 关闭其他已展开的子菜单
allSubMenus.forEach(menu => {
if (menu !== subMenu) menu.classList.remove('show');
});
subMenu.classList.toggle('show');
});
});
// 点击空白处收起所有子菜单
document.addEventListener('click', function(e) {
if (!e.target.closest('.dropdown-submenu')) {
document.querySelectorAll('.dropdown-submenu .dropdown-menu').forEach(m => m.classList.remove('show'));
}
});
- 必须调用
e.preventDefault()，否则<a></a>会跳转或刷新 -
e.stopPropagation()防止事件冒泡到上级dropdown导致主菜单意外关闭 - 不推荐用
mouseover实现悬停展开——在 iPad 或折叠屏上极易误触
后台菜单结构中容易忽略的可访问性与键盘支持
后台系统常被内部用户高频使用，键盘导航（Tab/Shift+Tab/Enter/Escape）不能妥协。Bootstrap 原生 dropdown 支持键盘，但多级嵌套后会被破坏。
- 每个
dropdown-item必须有role="menuitem"，父dropdown-menu加role="menu" - 二级菜单触发链接需加
aria-haspopup="true"和aria-expanded="false"，JS 中同步更新aria-expanded - 按
Enter或Space应展开子菜单；Escape应逐级收起（非一键全关） - 焦点管理：子菜单展开后，焦点应自动移到第一个
menuitem；关闭时应回到触发链接
这点在多数“能用就行”的后台模板里被跳过，但一旦涉及残障同事或审计合规，就是硬性门槛。
