Bootstrap 5 默认不支持三级下拉菜单，因其设计上移除了多级支持以提升移动端体验与可访问性；需通过阻止事件冒泡、调整HTML结构、添加position-static及定制CSS（如start-100、伪元素箭头）并配合JS控制显示时机与键盘导航来实现。
Bootstrap 5 默认不支持三级下拉菜单
bootstrap 5 的 dropdown 组件原生只支持两级：主菜单 → 二级下拉。一旦你写了个 <div class="dropdown-menu"> 嵌套在另一个 dropdown-menu 里，鼠标移入时二级菜单会立即关闭——因为 bootstrap 的 dropdown 插件默认监听 mouseleave，且未对嵌套子菜单做事件委托或延迟关闭处理。
这不是 bug，是设计取舍：官方认为三级菜单在移动端体验差、可访问性弱，所以主动移除了多级支持（Bootstrap 4 末期已标记废弃，5.0 彻底删除）。
手动补全三级逻辑：关键在阻止事件冒泡 + 控制显示时机
要让三级菜单稳住，核心不是加更多 class，而是干预两件事：一是阻止二级菜单的 mouseleave 提前触发关闭；二是让三级菜单在鼠标真正离开整个二级区域（含三级项）时才隐藏。
实操建议如下：
- 给二级
dropdown-menu添加data-bs-popper="none"（禁用 Popper 重定位干扰） - 为二级菜单项中带三级的
<a>或<button>添加class="dropdown-toggle"和data-bs-toggle="dropdown" - 三级菜单容器必须是二级菜单的直接子元素，且 class 为
dropdown-menu，并加position-static（避免被 Popper 错位） - 用 JS 拦截二级菜单的
hide.bs.dropdown事件，在鼠标仍在二级+三级区域内时不执行隐藏
示例结构片段：
<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="#">基础服务</a></li>
<li class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">企业方案</a>
<ul class="dropdown-menu position-static">
<li><a class="dropdown-item" href="#">SaaS 版</a></li>
<li><a class="dropdown-item" href="#">私有部署</a></li>
</ul>
</li>
</ul>
</li>
CSS 补丁：修正三级菜单定位与箭头方向
Bootstrap 5 的 dropdown-menu 默认靠左对齐、向上/向下展开，但三级菜单需要右向展开（否则会溢出视口）。仅靠 HTML 结构不够，必须加定制 CSS：
- 给三级
dropdown-menu加start-100 top-0类，使其左边缘对齐父项右边缘 - 用
.dropdown-menu .dropdown-menu::before伪元素画右向小箭头（原生箭头只支持上/下/左） - 移除三级菜单的
margin-top（Bootstrap 对二级菜单加了margin-top: .125rem，三级不需要） - 确保
dropdown-menu的min-width足够，避免文字折行挤压布局
最小必要样式：
.dropdown-menu .dropdown-menu {
margin: 0;
min-width: 180px;
}
.dropdown-menu .dropdown-menu::before {
content: "";
position: absolute;
top: 12px;
left: -6px;
width: 0; height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #dee2e6;
}
移动端适配和可访问性不能跳过
纯 hover 触发的三级菜单在触摸设备上完全失效。必须保证点击也能展开：二级项用 <button> 替代 <a href="#">，并监听 click 手动 toggle 三级菜单的 show class；同时为屏幕阅读器添加 aria-expanded 和 aria-haspopup="menu" 属性。
容易被忽略的点：
- 键盘导航时，
Tab应能进入三级菜单项，Esc需逐级退出（不是一键关所有） - 如果项目要求 WCAG 2.1 AA 合规，三级菜单必须支持
pointer-events: none过渡动画，否则焦点可能丢失 - 不要依赖
hover媒体查询做“仅桌面”逻辑——iOS Safari 的 hover 模拟行为不可靠
复杂点不在代码量，而在事件流控制粒度：鼠标移入二级区域 → 显示三级 → 移入三级 → 不关闭二级 → 移出整个二级+三级区域 → 延迟 200ms 关闭。这个延迟值必须可配置，否则快速扫过菜单会误关。
