移动端无法嵌套触发:hover实现多级下拉菜单，是iOS/Android浏览器规范限制所致；需改用JS控制show类切换，并注意dropdown-backdrop遮挡、z-index层叠上下文及动态内容未初始化等问题。
移动端:hover根本不会嵌套触发
纯 CSS 实现的多级下拉菜单在手机上点不开，不是你写错了，是 iOS 和 Android 的浏览器规范明确不支持 :hover 的嵌套链式响应。比如 .dropdown-item:hover .dropdown-menu 这种写法，在桌面端鼠标悬停时能逐级展开；但在触摸设备上，第一次点击会让一级菜单显示，但二级菜单的 :hover 状态无法被“激活”——它没有悬停源，也没有持续 hover 状态。
常见错误现象：
- 点开一级后，再点二级项，整个菜单立刻收起
- 长按二级项，菜单闪一下就消失
- 开发者工具里 DOM 存在，但
display: none始终没变
这不是 Bug，是规范行为。别试图用 @media (hover: hover) 包裹二级规则来“修复”，它只判断设备是否有 hover 能力，不改变触发逻辑。
dropdown-backdrop 在移动端遮挡点击
Bootstrap 5 展开下拉时会自动插入一个全屏 <div class="dropdown-backdrop">，默认 <code>position: fixed。某些安卓 WebView 或 iOS Safari 会把它渲染在 .dropdown-menu 上方，导致你点的其实是 backdrop，而不是菜单项本身。
立即学习“前端免费学习笔记（深入）”；
检查方法：打开开发者工具，展开菜单后搜索 dropdown-backdrop，看它是否覆盖在菜单上方。
临时修复（仅限调试）：
.dropdown-backdrop {
position: static !important;
}
注意：display: none 不可取——部分版本 Bootstrap 依赖 backdrop 存在才能正常关闭菜单。
z-index 在 navbar-collapse 内失效
移动端下拉菜单“消失”，大概率不是没渲染，而是被盖住了。根本原因是 .navbar-collapse 启用后会创建新的层叠上下文（尤其当它用了 transform 动画），此时你在子菜单上设的 z-index: 9999 只在该上下文内生效，对外无效。
必须做两件事：
- 给父级
.dropdown-item加position: relative（否则left: 100%定位错乱） - 把二级菜单的
z-index提到和.navbar-collapse同级或更高——查 computed 样式确认其z-index值（通常为1000），然后设为1001或更高
别全局狂加 z-index: 9999，后续加 Toast、Tooltip 会直接打架。
data-bs-toggle="dropdown" 在动态插入内容中未初始化
如果你的多级菜单是通过 AJAX、Alpine、Turbo 或其他方式动态插入的，Bootstrap 不会自动为新节点绑定事件。即使 HTML 结构完全正确，data-bs-toggle="dropdown" 也形同虚设。
验证方式：控制台执行 bootstrap.Dropdown.getInstance(document.querySelector('.dropdown'))，返回 null 就说明没初始化。
手动补救：
- 确保 DOM 插入完成后调用：
new bootstrap.Dropdown(element) - 对每个带
data-bs-toggle="dropdown"的触发器单独实例化（二级菜单不能复用一级的实例） - 避免在
<script></script>标签里直接执行，改用DOMContentLoaded或$(document).ready()
最易被忽略的是：二级菜单的触发器（即 .dropdown-item）必须是独立的 .dropdown 容器包裹，不能只靠 class 堆叠——否则 Popper 定位会彻底错乱。
