Bootstrap 5 移除多级下拉原生支持，可通过纯 CSS hover（桌面端）、JavaScript 初始化 Dropdown（全交互）、Collapse 折叠菜单（响应式）三种方式实现；优势为开发高效、无障碍友好、样式一致，缺点含触屏失效、键盘导航易中断、定位偏移风险。

如果您在使用 Bootstrap 构建导航栏时发现下拉菜单无法展开二级或三级结构，则可能是由于 Bootstrap 5 官方已移除对多级下拉菜单的原生支持。以下是实现该功能的多种可行路径：

一、纯 CSS hover 实现二级菜单（桌面端优先）

该方法利用嵌套选择器触发显隐，不依赖 JavaScript，兼容性高，适用于鼠标操作为主的后台管理界面或文档站点。关键在于修正子菜单定位与显隐控制逻辑，避免默认 display: none 与 transition 冲突。

1、为一级下拉项的父容器添加 class="dropdown"，并在其内部

中嵌套二级

元素。

2、在自定义 CSS 中添加：.dropdown-submenu:hover .dropdown-menu { display: block; }，并确保二级菜单具有 position: absolute; top: 0; left: 100%; 定位样式。

3、取消 Bootstrap 默认对 .dropdown-menu .dropdown-menu 的 opacity: 0 和 visibility: hidden 声明，改用 display: none 控制初始隐藏状态。

二、JavaScript 手动初始化 Dropdown 实例（全交互支持）

此方式可恢复 click 触发能力，并支持键盘导航（如 Tab 进入、Esc 关闭），满足 WCAG 2.1 无障碍要求。适用于需兼顾触屏与辅助技术的生产环境。

1、为每个二级菜单的触发项添加唯一 data-bs-toggle="dropdown" 属性，并确保其父级

具有 class="dropdown dropend"（Bootstrap 5 推荐语义）。

2、在 DOM 加载完成后，遍历所有二级触发器，调用 new bootstrap.Dropdown(element) 显式初始化实例。

3、监听 show.bs.dropdown 事件，在触发前检查焦点路径，防止子菜单因父级关闭而意外收起。

三、响应式侧边多级折叠菜单（Collapse 替代方案）

当导航层级深、空间受限（如移动端或窄屏后台）时，放弃下拉模式，改用垂直折叠结构更符合用户预期。该方案规避了 Popper 定位与 hover 不兼容问题，且天然支持响应式断点切换。

1、将每级菜单项封装为

，并为其绑定独立的 data-bs-target 指向对应折叠容器。

2、使用 bootstrap.Collapse 构造函数为每个 .collapse 元素单独实例化，避免全局事件干扰。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

3、为父级按钮添加 aria-expanded 属性，并同步更新其值，确保屏幕阅读器可识别当前展开状态。

四、Bootstrap 导航增强的优点

使用上述任一增强方式后，导航系统可获得明确的结构语义与可控交互流。其优势体现在：组件命名规范统一，便于团队协作维护；官方文档完备，CSS 类职责清晰；通过轻量补丁即可复用现有 Bootstrap 工具链，无需替换整套 UI 框架。

1、开发效率提升：基于已有 class 体系扩展，减少从零编写布局逻辑的时间。

2、无障碍基础保障：手动初始化 Dropdown 或 Collapse 实例时，可精确控制 ARIA 属性与键盘事件流。

3、样式一致性高：继承 Bootstrap 的间距、圆角、阴影等设计 token，避免视觉割裂。

五、Bootstrap 导航增强的缺点

增强过程暴露了框架本身的设计取舍，也引入新的维护负担。尤其在多级交互中，原生缺失导致必须绕过默认行为，增加了调试复杂度与兼容性风险。

1、移动端 hover 失效：纯 CSS 方案在触屏设备上无法触发二级菜单，必须额外补充 click 逻辑。

2、键盘导航易中断：若未正确处理 Tab 键聚焦顺序与 Esc 事件冒泡，用户可能卡在一级菜单无法进入子项。

3、CSS 定位易偏移：二级菜单依赖 left: 100% 或 top: 100%，在响应式断点变化时可能出现错位或溢出视口。