Bootstrap 5 官方主动移除多级下拉菜单支持，因嵌套的 dropdown-menu 不被 JS 初始化、CSS 不触发显隐、移动端点击即收起；需手动补 position: relative、absolute 定位、JS 控制 show/hide 及键盘导航。
bootstrap 5 官方不支持多级下拉菜单，这不是你写错了，是框架主动移除的——dropdown-menu嵌套在另一个dropdown-menu里，js 不初始化、css 不显隐、移动端点击即收起，纯靠堆 data-bs-toggle="dropdown" 没用。
为什么 .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;
}
三级菜单鼠标一移就闪退怎么办
二级菜单展开后，鼠标从一级项移到二级项再进三级项，二级菜单立刻关闭——这是 Bootstrap 的 mouseleave 事件没做区域判断，直接触发了隐藏。
- 不要给二级
.dropdown-menu加data-bs-popper="none"（已废弃），改用 CSS 强制定位 - 三级菜单容器必须是二级
.dropdown-menu的**直接子元素**，不能是兄弟节点 - 监听
mouseenter时手动调bootstrap.Dropdown.getOrCreateInstance()，别依赖自动初始化 - 用
setTimeout(..., 200)延迟二级菜单的hide()，留出鼠标穿越间隙的时间
关键 JS 片段：
const subMenus = document.querySelectorAll('.dropdown-submenu');
subMenus.forEach(el => {
const subMenuEl = el.querySelector('.dropdown-menu');
const dropdown = bootstrap.Dropdown.getOrCreateInstance(subMenuEl);
el.addEventListener('mouseenter', () => dropdown.show());
el.addEventListener('mouseleave', () => setTimeout(() => dropdown.hide(), 200));
});
移动端点击后整个下拉消失怎么修
用户点开二级菜单，还没点到三级，整个 .dropdown 就收起来了。这是因为 Bootstrap 的 click 关闭逻辑会冒泡到一级容器，且未区分目标是否属于子菜单。
- 给二级触发项（比如
<button class="dropdown-submenu-toggle">）加自定义类，避免和一级data-bs-toggle冲突 - 在 click 监听里用
e.stopPropagation()阻断事件向上传递 - 用
e.target.closest('.dropdown-submenu')判断点击是否落在子菜单区域，否则才清空所有.show - 别用
pointer-events: none遮罩子菜单——里面所有链接都会失活
z-index 容易被忽略：如果二级菜单被 .navbar（z-index: 1000）盖住，至少设成 z-index: 1001；若父容器有 transform，子菜单的 z-index 只在该上下文内生效，得提到同级容器上。
键盘导航和屏幕阅读器支持为什么总被漏掉
纯 hover + 手写 show/hide 的方案，Tab 键卡在一级菜单就进不去二级，Esc 按不了子菜单，aria-expanded 也不同步——这不符合 WCAG 2.1，上线后可能被投诉。
- 每个二级触发项必须带
aria-haspopup="menu"和aria-expanded="false" - 展开时手动设
aria-expanded="true"，并把焦点focus()移到第一个可聚焦子项 - 监听
keydown，对ArrowRight（进子菜单）、Escape（关当前层）、Tab（按层级流转）做响应 - 别用
display: none控制初始隐藏——屏幕阅读器可能跳过，改用aria-hidden="true"+visibility: hidden
最稳妥的路径不是硬补三级，而是评估是否真需要——多数后台系统用 Collapse 折叠菜单替代下拉，既规避 Popper 定位问题，又天然支持键盘和响应式切换。
