Bootstrap 5 多级下拉菜单需手动补全 CSS：父级 .dropdown-item 必须设 position: relative，子 .dropdown-menu 设 position: absolute; left: 100%; top: 0; margin-top: -2px；移动端须用 JS 替代 :hover；z-index 需高于父容器且避免层叠上下文干扰。
Bootstrap 5 默认不支持多级下拉菜单，仅靠 HTML 嵌套 dropdown-menu 不会触发显示 —— 必须手动补全 CSS 样式才能让二级菜单 hover 展开。
为什么 .dropdown-item:hover .dropdown-menu 不生效
常见错误是选择器写错或定位缺失。浏览器里能看到 DOM 结构，但二级菜单始终 display: none，根本原因是：父级 .dropdown-item 没设 position: relative，导致子 .dropdown-menu 的 left: 100% 相对于 body 定位，直接飞出视口。
- 必须给带子菜单的
<li class="dropdown-item">加position: relative - 二级
.dropdown-menu要设position: absolute; top: 0; left: 100%; margin-top: -2px（对齐一级菜单边框） - 避免用
.dropdown-menu:hover .dropdown-menu—— 子菜单自己 hover 时早已脱离触发源，逻辑断裂 - 确保 HTML 中子菜单是
.dropdown-item的**直接子元素**，不是兄弟节点：<li class="dropdown-item">Products<ul class="dropdown-menu"><li><a>Item 1</a></li></ul></li>
移动端点击失效？别只靠 :hover
:hover 在 iOS/Android 上不可靠：轻点可能短暂触发、长按无反应、键盘焦点无法进入，纯 CSS 方案在小屏上基本等于不可用。
- 加媒体查询，在
@media (max-width: 991.98px)下禁用:hover显隐逻辑 - 改用 JS 控制
show/hide类切换，监听click事件而非mouseenter - 不要全局设
pointer-events: none—— 这会让子菜单里所有链接失活 - 若用 JS，需手动调用
bootstrap.Dropdown.getOrCreateInstance(el).show()，不能只依赖data-bs-toggle="dropdown"
z-index 被盖住？检查层叠上下文
二级菜单“消失”往往不是没渲染，而是被 .navbar（z-index: 1000）、.modal（z-index: 1055）等盖住了。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具看父容器的
computed z-index和是否创建了新层叠上下文（比如有transform） - 子菜单至少要比父级高 1，例如父级是
1000，二级就得设z-index: 1001 - 若父容器用了
transform（如.navbar-collapse动画），子菜单的z-index只在该上下文内生效，得把z-index提到同级容器上 - 避免全局设
z-index: 9999—— 后续加Toast或Tooltip会冲突
最易被忽略的是：HTML 结构语义必须正确 —— 子菜单必须作为 .dropdown-item 的直接子元素存在，且整个链路中不能漏掉任何一个 position: relative。否则哪怕 CSS 写对了，定位也会彻底偏移。
