Bootstrap 5 默认不支持多级下拉菜单，因JS仅处理一级子菜单且无默认CSS；需用:hover纯CSS实现桌面端二级展开，或结合JS+aria属性确保移动端与无障碍兼容。
多级下拉菜单在 Bootstrap 5 中默认不支持
Bootstrap 5 官方移除了对多级下拉（即 .dropdown-menu 内再嵌套 .dropdown-menu）的 JavaScript 支持，也未提供默认 CSS 样式。直接写嵌套结构时，二级菜单会立即显示、无法 hover 或 click 触发，且定位错乱。
根本原因在于：Bootstrap 5 的 .dropdown-menu 默认 display: none，但它的显示依赖 JS 的 show 类 + data-bs-toggle="dropdown"，而该逻辑只作用于一级子菜单，不递归处理嵌套项。
- 不要指望加
data-bs-toggle="dropdown"到二级<a>上就能生效 —— JS 不识别 - 不要只靠
:hover控制display—— 移动端无 hover，且焦点/键盘导航会失效 - 避免用
position: absolute手动调二级菜单位置 —— 响应式断点下极易偏移
用 CSS 嵌套选择器实现 hover 展开（桌面端优先）
如果你明确只面向桌面用户、且接受 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 要求必须修复。
