Bootstrap 5 官方移除了对二级及以上下拉菜单的原生支持，dropdown-menu 嵌套不会响应 hover 或 click，子菜单始终 display: none 且无定位与交互逻辑。
二级菜单为什么不能直接用 dropdown-menu 嵌套？
Bootstrap 5 官方移除了对多级下拉菜单的原生支持，dropdown-menu 内再套 dropdown-menu 不会响应 hover 或 click —— 不是你的 HTML 写错了，是框架故意不处理。浏览器里能看到 DOM 结构，但子菜单始终 display: none，且无定位偏移、无显隐过渡、无键盘导航支持。
常见错误现象包括：鼠标移到一级菜单项上，二级菜单毫无反应；点击后整个下拉区域瞬间收起；移动端完全无法展开。
- 根本原因在于 Bootstrap 的 JS 插件只初始化一级
.dropdown容器，子级.dropdown-menu没有独立实例，也不在 Popper 定位上下文中 - CSS 层面缺失
.dropdown-menu .dropdown-menu的定位规则和display控制逻辑 - 即使加了
data-bs-toggle="dropdown"到子级<li>，也不会被自动识别为可触发项
如何用纯 CSS 实现二级菜单多列布局？
多列本质是让二级 dropdown-menu 内部的 <ul> 或 <div> 并排排列，而非默认的垂直堆叠。关键不在“多级”，而在“多列”——这和是否嵌套无关，只需控制子容器的 display 和宽度。
必须满足三个前提：
- 父级
.dropdown-item要设position: relative，否则二级菜单的left: 100%会相对 body 定位 - 二级
.dropdown-menu设position: absolute; top: 0; left: 100%; width: max-content（避免撑满父宽） - 内部真正实现多列的容器（比如
<div class="row">或<ul class="d-flex flex-wrap">）需显式控制子项宽度与换行逻辑
示例片段（二级菜单内分两列）：
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">Products</a>
<ul class="dropdown-menu">
<li>
<div class="d-flex">
<div class="flex-fill pe-2">
<h6 class="dropdown-header">Category A</h6>
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
</div>
<div class="flex-fill ps-2">
<h6 class="dropdown-header">Category B</h6>
<a class="dropdown-item" href="#">Item 3</a>
<a class="dropdown-item" href="#">Item 4</a>
</div>
</div>
</li>
</ul>
</li>
注意：flex-fill 确保两列等宽，pe-2/ps-2 提供间距；若内容长度差异大，建议加 min-width: 180px 防止列塌缩。
移动端点击展开二级菜单怎么兼容？
:hover 在 iOS 和 Android 上不可靠，纯 CSS 方案在触屏设备上基本失效。不能指望用户“长按”或“模拟悬停”，必须引入轻量 JS 补全 click 逻辑。
核心思路是：保留一级菜单的 data-bs-toggle="dropdown"，但拦截二级菜单的展开行为，改用 class 切换 + 手动定位。
- 给二级触发项（如
<li class="dropdown-submenu">）添加自定义类，避免和 Bootstrap 默认选择器冲突 - 监听
click，调用bootstrap.Dropdown.getOrCreateInstance()初始化子菜单实例，再.show() - 同时监听
document的click，判断点击是否在菜单外，再.hide()，防止点其他区域不收起 - 务必加
aria-haspopup="true"和aria-expanded属性，否则屏幕阅读器无法识别状态
简单补丁示例：
document.querySelectorAll('.dropdown-submenu > .dropdown-item').forEach(el => {
el.addEventListener('click', e => {
e.preventDefault();
const submenu = el.nextElementSibling;
if (submenu && submenu.classList.contains('dropdown-menu')) {
const dropdown = bootstrap.Dropdown.getOrCreateInstance(submenu);
dropdown.show();
el.setAttribute('aria-expanded', 'true');
}
});
});
z-index 和层叠上下文导致二级菜单被遮挡怎么办？
二级菜单常在 .navbar、.modal 或带 transform 的容器中消失，不是没渲染，是被盖住了。根本原因是层叠上下文（stacking context）重置了 z-index 的作用域。
排查步骤：
- 用浏览器开发者工具检查父容器的 computed
z-index和transform、opacity、will-change等属性（任一都可能创建新层叠上下文） - 如果父级是
.navbar（默认z-index: 1000），二级菜单至少设z-index: 1001；若父级有transform: translateY(0)，就得把二级菜单提到同级 DOM 位置，或给父级加z-index: auto解除上下文 - 避免全局写
z-index: 9999—— 后续加.toast（z-index: 1090）或.tooltip（z-index: 1080）会覆盖失败
最稳妥的 CSS 写法：
.dropdown-submenu .dropdown-menu {
z-index: 1001;
}
.navbar .dropdown-submenu .dropdown-menu {
z-index: 1002;
}
复杂点在于：一旦父容器用了 transform，子菜单的 position: absolute 就只能在该容器内定位，此时必须把二级菜单 DOM 移出该容器，用 JS 动态挂载到 body 下，并手动同步位置 —— 这步容易被忽略，但却是真正在生产环境不出问题的关键。
