下拉菜单不显示的主因是.dropdown-item缺少position: relative；移动端点击失效常因.dropdown-backdrop遮罩层z-index过高；hover无效因选择器错误，应改用.dropdown:hover .dropdown-menu；z-index失效多因父容器触发意外层叠上下文。
下拉菜单始终 display: none，检查 .dropdown-item 的 position: relative
二级菜单不显示，最常见原因是父级 .dropdown-item 缺少 position: relative。Bootstrap 5 默认只给 .dropdown 容器设了定位，但多级嵌套时，子菜单的 left: 100% 是相对于最近的「已定位祖先」计算的——如果 .dropdown-item 没设 position，它就向上一直找到 ，导致子菜单直接飞出视口右侧。
必须手动补全：
-
.dropdown-item.has-submenu { position: relative; }（建议加专属类，避免污染所有.dropdown-item） - 对应子
.dropdown-menu要设position: absolute; left: 100%; top: 0; margin-top: -2px; - 别用
.dropdown-item:hover .dropdown-menu这类选择器——hover 时 DOM 已展开，但 CSS 无法穿透到动态插入的子菜单节点
移动端点不动？先看 .dropdown-backdrop 是否盖住了 .dropdown-menu
展开菜单后，Bootstrap 5 会自动插入一个 <div class="dropdown-backdrop">。它默认是 <code>position: fixed，在部分安卓 WebView 或 iOS Safari 中会被渲染在 .dropdown-menu 上方，造成点击穿透失效：你点的不是菜单项，而是这个透明遮罩。
验证方式：打开开发者工具 → 展开菜单 → 搜索 dropdown-backdrop → 看它是否在 .dropdown-menu 的 z-index 之上。
修复只需一行 CSS：
.dropdown-backdrop { position: static !important; }- 绝对不要写
display: none—— 某些 Bootstrap 版本依赖 backdrop 存在来关闭菜单，删掉会导致关不掉 - 如果用了自定义
z-index，确保.dropdown-menu的值高于其父容器，且父容器没触发新的层叠上下文（比如没意外加opacity: .99或will-change: transform）
桌面端 hover 不生效？不是 JS 问题，是 CSS 选择器写错了
Bootstrap 5 默认禁用 hover 触发（为兼容触摸设备），但如果你手动加了 hover 样式，.dropdown-item:hover .dropdown-menu 往往不工作，原因很具体：
- HTML 结构里，
.dropdown-menu实际是.dropdown的子元素，不是.dropdown-item的直系后代——所以.dropdown-item:hover .dropdown-menu根本选不到 - 正确写法应是：
.dropdown:hover .dropdown-menu，或更稳妥地用.dropdown.show .dropdown-menu配合 JS 的show类控制显隐 - 移动端必须用 click，不能依赖 hover；若需桌面 hover + 移动端 click，得用 JS 判断
matchMedia或加ontouchstart标记再切逻辑
z-index 明明设了却无效？检查是否触发了意外的层叠上下文
z-index 只对「已定位元素」生效，且只在同一个层叠上下文中比较。常见陷阱包括：
- 父容器设了
overflow: hidden且同时有position: relative→ 它会截断子元素的溢出，也创建新层叠上下文，导致.dropdown-menu的z-index再大也出不去 - 某个祖先元素用了
transform、filter、opacity 或 <code>will-change→ 同样创建独立层叠上下文，把下拉菜单“框死”在里面 - 用开发者工具检查
.dropdown-menu的 computed styles，看z-index是否被标记为auto（说明它没生效）
真正起作用的，往往不是调高 z-index 数值，而是删掉那个意外创建层叠上下文的 transform 或 overflow 声明。
