Bootstrap 5 默认不支持多级下拉菜单，官方因移动端体验与可访问性问题主动移除该功能；如需实现，须手动编写CSS（解决定位、z-index、悬停断连）和JS（支持点击、焦点管理、防冒泡），并谨慎处理Popper冲突。
Bootstrap 5 默认不支持多级下拉菜单
Bootstrap 5 官方移除了对二级及以上 .dropdown-menu 嵌套的支持，所有子菜单默认被隐藏且无 hover 或 click 展开逻辑。这不是 bug，而是设计取舍——官方认为多级菜单在移动端体验差、可访问性弱。如果你确实需要（比如后台管理系统的侧边导航或顶部导航），必须手写 CSS + 少量 JS。
用 :hover 实现二级菜单（桌面端友好）
核心是让子菜单在父项悬停时显示，并控制定位与层级。关键点不是“加样式”，而是解决三个问题：定位偏移、z-index 层叠、鼠标移入间隙断连。
-
.dropdown-menu .dropdown-menu必须设position: absolute，并用top: 0; left: 100%向右展开（非默认的 bottom-left） - 父级
.dropdown-item需要设position: relative，否则子菜单相对.dropdown-menu定位会错位 - 为避免鼠标从父项移到子菜单途中触发
:hover中断，建议给父项加padding-right并在子菜单上加margin-left: -4px补齐视觉间隙 - 务必设置
z-index：父菜单z-index: 1000，子菜单至少z-index: 1001，否则会被兄弟菜单遮盖
.dropdown-menu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -2px;
margin-left: -4px;
z-index: 1001;
}
.dropdown-item {
position: relative;
}
.dropdown-item:hover .dropdown-menu {
display: block;
}
用 JS 支持点击展开（兼顾移动端和键盘导航）
纯 :hover 在触摸设备和屏幕阅读器中失效。推荐监听 click，并用 data-bs-toggle="dropdown" 的原生机制做兼容：只拦截二级菜单的 click，不干扰一级下拉的 Bootstrap 行为。
- 给二级菜单触发项（如
<a class="dropdown-item">）添加data-bs-toggle="dropdown"会冲突，应改用自定义属性如data-dropdown-submenu - JS 中用
event.stopPropagation()防止冒泡关闭父菜单 - 需手动切换
.show类，并监听外部点击收起所有子菜单 - 注意焦点管理：展开后应将焦点移到子菜单第一个可聚焦元素（如
querySelector('a, button')）
document.querySelectorAll('[data-dropdown-submenu]').forEach(el => {
el.addEventListener('click', e => {
e.preventDefault();
e.stopPropagation();
const submenu = el.nextElementSibling;
if (submenu && submenu.classList.contains('dropdown-menu')) {
submenu.classList.toggle('show');
}
});
});
避免与 Bootstrap 5.3+ 的 data-bs-popper 冲突
新版 Bootstrap 使用 Popper 动态计算下拉位置，而手写二级菜单常绕过 Popper，直接用绝对定位。这会导致子菜单在视口边缘被裁剪或定位漂移。
立即学习“前端免费学习笔记（深入）”；
- 不要给二级菜单加
data-bs-popper="static"—— 它已废弃，且会干扰原生逻辑 - 若需 Popper 支持（例如子菜单需智能翻转方向），得用 Popper 手动初始化，但代价是放弃 Bootstrap 的
Dropdown类实例，改用createPopper()API - 更稳妥的做法：禁用子菜单的 Popper（移除
data-bs-popper属性），用 CSS@media (max-width: 992px)把多级菜单降级为单级折叠列表
真正麻烦的不是写几行 CSS，而是权衡：是否值得为小众场景增加维护成本？很多团队最后选择用 offcanvas 或独立导航组件替代多级下拉——毕竟 Bootstrap 的设计哲学本就不鼓励它。
