子菜单被裁剪或定位异常的主因是祖先元素的 overflow 非 visible 且形成包含块，或浮动导致定位上下文失效；需用 DevTools 检查并调整 overflow 位置、显式设置 position: relative、避免 transform 干扰、移动端改用 JS 控制。
父容器加了 overflow: hidden，子菜单直接被砍掉
这是最常见也最容易误判的问题：你看到子菜单“只露出一角”或“完全不显示”，不是 JS 没触发，而是某个祖先元素（不一定是直接父级）设置了 overflow: hidden 或 overflow: clip，且该祖先恰好形成了包含块（containing block）。
绝对定位的子菜单会受任意层级上满足条件的 overflow 值影响——只要该祖先同时具备「非 visible 的 overflow」+「已定位（position ≠ static）」或「是根元素」，它就会成为裁剪边界。
- 用 DevTools 的 Computed 面板逐层检查祖先元素的
overflow和position计算值，重点关注导航栏外层、.navbar、.header这类包裹容器 - 临时删掉可疑祖先的
overflow: hidden，看菜单是否立刻恢复正常；若恢复，说明问题在此 - 不要用
overflow: visible硬覆盖——它对根元素或某些 flex/grid 容器无效；优先把overflow移到真正需要裁剪的子区域（如 logo 图片容器），而非整个导航结构
浮动父级没创建定位上下文，子菜单飘到页面左上角
多级菜单里，如果一级菜单项用了 float: left，它就脱离文档流，导致 position: relative 失效——哪怕你写了 position: relative，浏览器也不会把它当作绝对定位的参照物。
结果就是子菜单以 或最近的已定位祖先为基准，位置完全失控。
立即学习“前端免费学习笔记（深入）”；
- 给触发下拉的菜单项（例如
<li class="menu-item">）显式加position: relative，且确保它没被float覆盖；如果必须保留 float 布局，就在同一元素上补zoom: 1（IE）或display: inline-block（现代）来强制触发 layout - 避免在中间层加无意义的
position: relative+z-index，这会意外创建新的堆叠上下文，让子菜单的z-index只在小范围内生效 - 现代项目直接弃用
float做横向排列，改用display: flex；但注意：flex 容器本身不提供定位上下文，仍需手动给触发项加position: relative
display: flow-root 能清浮动，但对多级菜单定位没用
display: flow-root 是解决父容器高度塌陷（border/背景图消失）的利器，但它不改变定位上下文逻辑——它只是让父容器重新包含浮动子项，不会让 position: relative 在浮动元素上“复活”。
换句话说：加了 flow-root 后，父容器有高度了、背景图显示了、border 不断了，但子菜单依然可能飘走，因为定位参照还是没建立起来。
- 别指望
flow-root代替position: relative；两者解决的是不同维度的问题 - 若父容器已是
display: inline或inline-block，flow-root不生效，得先设display: block - 兼容 IE11？必须用伪元素
::after+clear: both，但记得三要素齐全：content: ""、display: table、clear: both，缺一不可
移动端 hover 失效 + transform 父级导致子菜单错位
iOS Safari 和部分安卓 WebView 对 :hover 支持极弱，且当父级同时存在 transform 和 position: relative 时，绝对定位的子菜单基准会被扭曲，尤其在缩放或滚动后位置偏移。
- 移动端必须用 JS 控制显示/隐藏，别依赖纯 CSS
:hover；可监听touchstart或用click+preventDefault防止跳转 - 检查触发项是否意外加了
transform: translateX(0)或scale(1)—— 这些会创建新包含块，干扰top/left计算 - 若必须用 transform 动画，把动画 applied 到子菜单自身，而不是它的父容器
overflow、一个被 transform 激活的包含块、或一个在旧浏览器里根本没生效的 position: relative。 
