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%相对于<body>定位，直接跑出屏幕 - 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">）加自定义类，不混用data-bs-toggle="dropdown"，否则 JS 初始化冲突 - 二级菜单容器必须是
.dropdown-item的**直接子元素**，不能是兄弟节点，否则选择器或事件委托失效
关键 JS 片段（仅需监听 click，不接管 hover）：
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类传导 —— 它只作用于一级，二级必须单独写媒体查询适配
原生箭头伪元素会错位，记得关掉：.dropdown-submenu .dropdown-menu::before { display: none; }
最易被忽略的是键盘导航和屏幕阅读器支持：Tab 键卡在一级进不去二级、Esc 关不掉子菜单、aria-expanded 没同步 —— 这些不是“能用就行”，而是 WCAG 2.1 合规硬要求，上线前必须验证。
