父容器设 overflow: hidden 会导致下拉菜单被裁剪，因创建 bfc 并裁剪绝对定位子元素；.dropdown 需显式设 position: relative 作为定位参考；fixed-top 导航需额外处理定位锚点；移动端纯 css 下拉不可用，必须用 js 实现。
父容器设了 overflow: hidden 就别指望下拉能出来
这是最常被忽略的“隐形杀手”。overflow: hidden 会强制创建块格式化上下文（BFC），同时裁剪所有超出边界的子内容——哪怕 .dropdown-menu 是 position: absolute 且 z-index: 9999，它也出不了父容器的框。
常见触发场景：
-
<header></header>或<nav></nav>上写了overflow: hidden（为了“防止文字溢出”） -
.card-body、.accordion-item或自定义 wrapper 加了overflow: hidden+position: relative - 用了
transform、filter、opacity 的父元素（也会悄悄建 BFC）
解决方法不是调高 z-index，而是：
- 用开发者工具检查
.dropdown-menu的直接父级和所有祖先，逐个看computed overflow和transform - 删掉
overflow: hidden；若必须控制溢出，改用padding、min-height或overflow: auto（不裁剪绝对定位） - 实在不能动父级？把下拉菜单挂到
下（需 JS 配合data-container="body"）
.dropdown 父元素没设 position: relative，下拉就“找不到家”
.dropdown-menu 默认靠 position: absolute 定位，但它需要一个“已定位的最近祖先”作为参考点。如果 .dropdown（或 .nav-item）是 position: static（默认值），那它就会往上一直找，最终落到 上——位置错乱、被遮挡、hover 失效都由此而来。
必须确认以下两点：
-
.dropdown元素显式设置了position: relative（Bootstrap 4 默认有，但自定义封装或重写时容易漏） - 这个
.dropdown元素本身没有意外创建层叠上下文（比如加了z-index: 0或transform）
示例修复：
.nav-item {
position: relative; /* 必须有 */
/* z-index: auto; 保持默认，别写 0 或负数 */
}
fixed-top 导航栏里下拉错位，本质是定位参考丢了
加了 fixed-top 后，.navbar 脱离文档流，而 .dropdown-menu 默认仍以它为定位锚点。但 Popper.js 在 fixed 容器里计算位置容易失准，尤其在移动端或快速滚动时。
实操建议：
- 给
.navbar-collapse加position: relative，让内部下拉有明确父级 - 禁用 Popper 并手动控制：
.dropdown-menu { position: absolute; top: 100% !important; left: 0; } - 确保
z-index比.navbar高：默认.navbar是1030，下拉至少设1031，且限定作用域如.navbar .dropdown-menu - 避免在
.dropdown-toggle上用transform或filter，否则下拉会被锁死在按钮局部上下文中
移动端纯 CSS 下拉根本不可用，这不是你代码的问题
iOS 和 Android 对 :hover 的支持极弱：只在首次点击时模拟一次，不冒泡、不持续、不支持嵌套触发。你在桌面调得再完美，手机上点开一级后，二级菜单永远 hover 不出来。
所以：
- 纯 CSS 实现的多级下拉，在触摸设备上等于“功能缺失”，不是 bug，是规范限制
- 要真兼容移动端，必须用 JS 切换
show类，并监听click（注意 Bootstrap 4 原生 Dropdown 插件不支持多级，得自己增强） - 临时方案：给带子菜单的
.dropdown-item加data-bs-toggle="dropdown"并event.preventDefault()，但前提是 jQuery 和 Bootstrap JS 已加载
真正麻烦的从来不是写几行 CSS，而是判断什么时候该放弃纯 CSS、转头写 JS —— 尤其当设计稿里出现了三级菜单+必须支持 iPad 时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
