bootstrap 5 不支持多级下拉菜单是官方主动设计取舍，因移动端体验差、可访问性难保障及键盘导航复杂；需用 css + 轻量 js 手动实现二级菜单，关键在 position: absolute、:hover/focus-within 控制显隐及 aria 属性补全。
Bootstrap 本身不提供原生的多级下拉菜单（Dropdown）支持，dropdown-menu 默认只渲染一级子菜单，嵌套 dropdown-menu 在 v5 中会被忽略或导致行为异常 —— 这不是 bug，是设计取舍。
为什么 Bootstrap 5 的 dropdown-menu 不支持多级嵌套
Bootstrap 5 移除了 jQuery 依赖，所有交互逻辑改用原生 JS 实现，而官方认为「多级下拉」在移动端体验差、可访问性（a11y）难保障、键盘导航逻辑复杂，因此主动放弃支持。DOM 结构上，.dropdown-menu 的 show 状态由 data-bs-popper 和事件委托控制，子级 .dropdown-menu 缺乏独立触发器和定位上下文，直接嵌套会导致：
- 鼠标移入子菜单时父级快速关闭（hover 事件穿透/丢失）
- 键盘 Tab 无法进入子菜单项（
aria-expanded和aria-haspopup未联动） - Popper.js 定位失效：子菜单默认 relative 定位，但 Popper 只为第一层
.dropdown-menu初始化实例
手动实现二级菜单的最小可行方案
若必须用 Bootstrap 样式体系实现二级菜单，需绕过原生 data-bs-toggle="dropdown"，改用纯 CSS + 少量 JS 控制显隐，并确保语义和焦点流可用。关键点：
- 父级
<li class="dropdown">保留data-bs-toggle="dropdown"，但子<ul class="dropdown-menu"></ul>不再加该属性 - 子菜单用
position: absolute+left: 100%横向展开，避免依赖 Popper - 用
:hover+focus-within触发显示，兼容键盘 Tab 进入后保持展开 - 为子菜单项添加
role="menuitem"，父<button></button>加aria-haspopup="true"和aria-expanded - JS 仅用于补全焦点管理：监听
keydown方向键，在子菜单间切换，按Esc逐级收起
示例片段（CSS 关键部分）：
.dropdown-menu .dropdown-menu {
position: absolute;
top: 0;
left: 100%;
margin-top: 0;
display: none;
}
.dropdown-menu li:hover > .dropdown-menu,
.dropdown-menu li:focus-within > .dropdown-menu {
display: block;
}
用第三方插件还是重写？性能与维护权衡
社区有 bootstrap-dropdowns-js、bs5-multi-dropdown 等插件，但要注意：
- 它们大多在 Bootstrap 5 基础上 patch JS 行为，但未解决 Popper 定位嵌套问题，小屏下仍可能错位
- 插件通常强制引入额外的
aria属性和键盘逻辑，若项目已用 React/Vue，反而增加 DOM 同步负担 - 真正稳定的方案是放弃
dropdown抽象，用nav+collapse+offcanvas模拟层级：比如一级用顶部导航，二级用侧边offcanvas或点击展开的accordion - 如果菜单结构固定且深度 ≤2，CSS-only 方案体积最小（display: grid +
subgrid（现代浏览器）或react-router-dom的嵌套路由驱动 UI
最常被忽略的是可访问性兜底：哪怕用了完美 CSS hover 效果，也得手动处理 aria-expanded 切换、focus 落点重定向、以及屏幕阅读器对“子菜单”角色的播报顺序 —— 这些没法靠 class 名自动完成。
