子菜单错位或消失的主因是父元素未设position: relative导致定位基准错误，或父容器有overflow: hidden/clip-path造成裁剪；z-index失效源于中间层创建了新层叠上下文；触摸设备hover失效需改用可聚焦元素或js控制；移动端下拉方向应通过js检测视口动态翻转。
为什么子菜单总是错位或消失
相对定位的父元素没设 position: relative，绝对定位的子菜单就会相对于最近的已定位祖先（甚至 body）偏移，导致飘走；更隐蔽的是，如果父容器有 overflow: hidden 或 clip-path，子菜单直接被裁掉——它明明渲染了，就是看不见。
- 确保每级可展开的菜单项（如
.menu-item）都显式设置position: relative - 检查父级容器是否意外带了
overflow: hidden（常见于导航栏封装组件、Flex 容器或 CSS 框架默认样式） - 用浏览器开发者工具的「盒模型」面板，逐层确认定位上下文和裁剪边界
多层嵌套时 z-index 不生效怎么办
z-index 只在同一个层叠上下文内比较。一旦某级菜单父元素设置了 z-index 且 position 不为 static，它就创建了新的层叠上下文，其内部所有子元素的 z-index 都只在这个新上下文里排序——哪怕你给三级菜单设了 z-index: 9999，也可能被二级菜单的层叠上下文整体压在下面。
- 避免在中间层级（如二级菜单容器）无必要地设置
z-index - 统一用
z-index: 1、2、3这类小整数控制层级，而不是堆砌大数字 - 若必须隔离样式，用
isolation: isolate替代靠z-index创建上下文
hover 展开在触摸设备上失效
CSS :hover 在 iOS 和部分 Android 浏览器中仅对可聚焦元素（如 a、button）触发，且首次点击才模拟 hover，后续交互容易中断。纯 div + :hover 的菜单在手机上基本不可用。
- 把触发元素换成
<a href="#"></a>或加tabindex="0"让div可聚焦 - 用
:focus-within替代部分:hover逻辑，配合键盘 Tab 导航 - 生产环境建议搭配轻量 JS 监听
click切换open类，CSS 用.menu-item.open > .submenu控制显示
移动端适配时下拉方向反了
绝对定位的子菜单默认从 top: 100% 向下展开，但在屏幕底部空间不足时，应该自动向上翻转。纯 CSS 很难判断空间，硬写 bottom: 100% 又会破坏层级顺序和动画连贯性。
- 不要依赖纯 CSS 自动翻转，优先用 JS 检测
getBoundingClientRect()的bottom是否超出视口 - 如果坚持用 CSS，可借助
@media (max-height: 600px)做粗略兜底，但无法覆盖折叠屏、横屏等场景 - 动画过渡要同时定义
top/bottom和opacity，否则翻转时会出现闪跳
最麻烦的不是怎么让菜单出来，而是怎么让它在各种缩放、滚动、焦点切换、屏幕旋转下依然稳定停在该在的位置——定位上下文、层叠顺序、输入模式这三块，漏掉任何一块，用户就会看到菜单“突然消失”或者“卡在半空”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
