Bootstrap 5 默认不支持原生多级下拉菜单（如悬停展开的子菜单），需结合 CSS 定制 + 少量 JavaScript 或使用 dropstart/dropend 等方向类配合手动触发逻辑，单纯添加 show 类仅强制显示但无法解决交互问题。
bootstrap 5 默认不支持原生多级下拉菜单（如悬停展开的子菜单），需结合 css 定制 + 少量 javascript 或使用 `dropstart`/`dropend` 等方向类配合手动触发逻辑，单纯添加 `show` 类仅强制显示但无法解决交互问题。
在 Bootstrap 5 中，官方已移除对多级下拉菜单（submenus）的内置支持，因此你遇到的“子菜单无法悬停或点击展开”是预期行为——dropdown-toggle 仅作用于一级 .dropdown-menu，不会自动绑定到嵌套的 .dropdown-menu 内部元素。
✅ 正确解决方案（推荐：纯 CSS + 原生 Bootstrap 事件）
以下是一个无需额外 JS 库、兼容 Bootstrap 5.3+ 的轻量级实现：
<!-- 主导航 -->
? 关键要点：
- 使用
dropend（而非dropstart）让子菜单向右展开，避免被父容器裁剪； - 为嵌套项包裹
<li class="dropdown-submenu dropend">，语义清晰且便于样式控制； - 子级
<a></a>必须保留data-bs-toggle="dropdown"和role="button"，否则 Bootstrap 的 dropdown 插件不会为其绑定事件； -
不要手动加
show类：它会强制显示菜单但破坏关闭逻辑（如点击空白处不收起），属于反模式。
? 补充 CSS（修复默认隐藏与定位）：
/* 启用子菜单悬停展开（可选，若需 hover 触发） */
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: 0;
margin-left: 0;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
/* 移动端兼容：确保点击仍可用 */
@media (max-width: 991.98px) {
.dropdown-submenu .dropdown-menu {
position: static !important;
display: none;
}
.dropdown-submenu.show > .dropdown-menu,
.dropdown-submenu:focus > .dropdown-menu {
display: block;
}
}
⚠️ 注意事项：
- Bootstrap 5 的
Dropdown插件默认只监听一级.dropdown-toggle，嵌套结构需确保每个子级<a></a>都被正确识别为触发器（即具备data-bs-toggle="dropdown"和合法role）； - 若使用
dropstart，子菜单会向左展开，易被父容器overflow: hidden截断，请检查.dropdown-menu父元素是否设置了overflow: hidden（常见于.navbar-collapse）； - 不建议依赖
show类硬编码显示——它绕过插件生命周期，会导致事件未绑定、键盘导航失效、无障碍支持退化。
✅ 最佳实践总结：
使用 dropend + 语义化嵌套结构 + 微调 CSS，即可在不引入第三方库的前提下，实现符合 Bootstrap 设计规范、可访问、响应式的二级下拉菜单。
