Bootstrap 5 官方移除了对三级及以上下拉菜单的支持，因 Popper 定位、焦点流、移动端交互及无障碍属性难以可靠处理；纯 CSS 无法解决嵌套结构、定位失控和悬停断连问题；可行方案是 JS 主导、结构扁平化并手动管理显示、ARIA 属性与响应式逻辑。
Bootstrap 5 默认不支持三级及以上下拉菜单
直接说结论：bootstrap 5 官方移除了对 dropdown-menu 嵌套超过一级的支持，无论你写几层 <ul class="dropdown-menu">，第三级（及更深层）菜单默认始终 display: none，且无 hover、click 或键盘触发逻辑。这不是你 html 结构错了，是框架主动砍掉的——因为 popper 定位、焦点流、移动端点击收起行为、无障碍属性（aria-expanded 等）在三级以上几乎无法可靠统一处理。
为什么纯 CSS 写 .dropdown-menu .dropdown-menu .dropdown-menu 不行
这类选择器看似能“递归”控制显示，实际会踩三个坑：
-
.dropdown-menu .dropdown-menu .dropdown-menu依赖严格嵌套结构，但 Bootstrap 的 JS 初始化只认第一层data-bs-toggle="dropdown"，子级没实例，show类不会被自动加到三级菜单上 - 定位完全失控：二级菜单靠
left: 100%横向展开，三级若继续用同样规则，会叠在二级右侧之外，且z-index难以逐层递增（比如二级设z-index: 1001，三级就得1002，但 CSS 无法动态生成） - 悬停断连更严重：鼠标从二级移到三级时，哪怕加了
margin-left: -4px，三层嵌套的间隙误差会放大，极易闪退
真正可行的三级方案：JS 主导 + 结构扁平化
放弃“嵌套 dropdown-menu”思路，改用显式分层容器 + 手动 JS 控制。核心不是堆 DOM，而是把三级菜单抽离为独立、可复用的模块：
- 一级菜单项保留
data-bs-toggle="dropdown"，触发原生.dropdown-menu - 二级菜单项（如 “产品”）不放
<ul class="dropdown-menu">，而是加class="dropdown-submenu-toggle"和data-submenu-id="products" - 所有三级菜单统一放在页面底部或
<div id="submenu-products" class="dropdown-menu dropdown-submenu">，初始display: none - JS 监听
.dropdown-submenu-toggle的click，调用document.getElementById(...).classList.toggle('show')，并手动管理aria-expanded和aria-haspopup - 关键要阻止冒泡：
e.stopPropagation()，否则点击二级项会触发一级菜单关闭
响应式断裂点必须手动接管
Bootstrap 的 dropend、dropstart 只作用于一级，对三级无效。在小屏下，三级菜单不能硬塞进横向空间，得降级为垂直展开：
- 用
@media (max-width: 992px)覆盖三级菜单样式：left: 0; top: 100%; margin-top: 0.25rem; - 禁用悬停逻辑：
@media (hover: none)下，彻底移除:hover触发，只保留 click - 键盘导航必须补全：监听
keydown的ArrowDown/Escape，手动切换三级菜单的show状态，并更新aria-expanded
三级以上的复杂度陡增，不是加几行 CSS 能解决的。真正上线前，必须用屏幕阅读器测试 aria 属性是否随展开/收起同步，以及 Tab 键能否逐级进入、Esc 是否逐级退出——这些细节一旦漏掉，就不是“不好用”，而是合规风险。
