子菜单不显示需检查:hover作用域、层级关系及z-index；移动端需js替代:hover；推荐用data-bs-toggle="dropdown"并手动初始化dropdown。
子菜单不显示？检查 :hover 作用域和层级关系
Bootstrap 默认的下拉菜单只支持一级，要实现多级（比如二级、三级子菜单），必须手动扩展 CSS。最常见问题是鼠标悬停时子菜单完全不出现——这几乎全是 CSS 选择器没写对或层级被遮挡导致的。
关键点在于：.dropdown-menu 默认是 display: none，需要靠父级 .dropdown:hover .dropdown-menu 这类规则触发显示；但二级菜单得依赖「一级菜单项 hover」而非整个下拉容器。
- 错误写法：
.dropdown-menu:hover .dropdown-menu—— 子菜单本身没有 hover 状态，且脱离了触发源 - 正确路径：用
.dropdown-item:hover + .dropdown-menu或.dropdown-item:hover .dropdown-menu（取决于 HTML 结构） - 必须加
position: absolute和top: 0; left: 100%让二级菜单贴着右侧展开 - 别忘了给父级
.dropdown-item设position: relative，否则left: 100%会相对 body 定位
移动端点击失效？:hover 在触摸设备上不可靠
纯 CSS 多级菜单在手机上基本无法使用，因为 :hover 在 iOS/Android 上只在模拟“悬停”时短暂触发，且不支持嵌套触发。这不是 Bug，是规范行为。
如果你必须兼顾移动端，就得放弃纯 CSS 方案，改用 JS 控制 show 类切换。但注意：Bootstrap 5 的 Dropdown 插件默认不支持多级，需手动增强。
- 简单补救：加媒体查询，小屏下强制显示所有子菜单（
@media (max-width: 768px) { .dropdown-menu { display: block !important; } }），再靠 JS 控制收起 - 更稳妥做法：监听
click，对.dropdown-item:has(.dropdown-menu)添加data-bs-toggle="dropdown"并阻止默认事件 - 别直接给
.dropdown-menu加pointer-events: none—— 这会让里面链接全部失活
z-index 叠加错乱？子菜单被其他组件盖住
多级菜单最容易在模态框（.modal）、导航栏（.navbar）或卡片（.card）里消失，不是没渲染，是被盖住了。根本原因是 Bootstrap 的 z-index 值有严格层级（.navbar 是 1000，.modal 是 1055），而自定义的子菜单没显式设值。
- 查当前父容器的
z-index（用浏览器开发者工具看 computed 样式） - 子菜单至少要比父级高 1，例如父级是 1000，二级菜单就得设
z-index: 1001 - 避免全局设
z-index: 9999—— 后续加 Toast、Tooltip 会打架 - 如果父容器用了
transform（比如.navbar-collapse动画），会创建新层叠上下文，此时子菜单的z-index只在该上下文内生效，必须把z-index提到同级或更高层
为什么推荐用 data-bs-toggle="dropdown" 而非手写 JS？
Bootstrap 的下拉逻辑已封装好事件绑定、键盘支持（Esc 关闭、方向键导航）、焦点管理。自己写 addEventListener('click') 很容易漏掉这些细节，尤其在嵌套结构里。
实操建议：保留 Bootstrap 的初始化逻辑，只扩展二级触发。比如给二级菜单项加 data-bs-toggle="dropdown"，并用 JS 拦截其 click 事件，阻止冒泡到一级菜单关闭。
- 必须调用
new bootstrap.Dropdown(element)初始化每个可展开的菜单，不能只靠 data 属性 - 禁用原生关闭行为：
event.stopPropagation()放在二级菜单的 click handler 里，否则点二级项会先关掉一级 - 别用
document.addEventListener('click')全局监听 —— 在 iframe 或 Shadow DOM 里会失效
display、visibility、z-index 和 offsetParent 看一眼。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
