absolute子菜单总飘左上角是因为父级未设position: relative；它相对于最近非static祖先定位，若无则贴body；须确保直接父容器（如li.menu-item）设relative，且DOM无缝隙、交互全覆盖。
absolute 子菜单为什么总飘在左上角？
因为没给父级加 position: relative。absolute 定位是相对于**最近一个非 static 的祖先元素**，如果所有父级都是默认 static，它就直接贴着 body 定位了。
- 常见错误现象：
ul.submenu用position: absolute后，不管怎么设top/left，都卡在页面左上角不动 - 必须确保直接父容器（比如
li.menu-item）设置了position: relative - 别在
body或全局 wrapper 上乱加relative——层级错一层，定位就全偏 - 如果父级本身是 flex/grid 容器，加
relative不影响布局流，放心用
二级菜单往右弹、三级菜单往下弹，怎么配 offset？
靠 left 和 top 组合控制方向，但要注意触发元素的尺寸和边框。
- 二级菜单通常右对齐父项：
left: 100%+top: 0（前提是父li高度已知且无 padding 干扰） - 三级菜单常从二级项底部向下展开：
top: 100%+left: 0，但得确认二级li有position: relative - 如果父项有
border或padding，用box-sizing: border-box避免计算偏差 - 避免写死像素值如
left: 200px——响应式下会错位，优先用百分比或100%相对父宽高
hover 延迟消失导致鼠标移过去断连怎么办？
这不是 CSS 能“修复”的问题，是 DOM 结构留了缝隙，让鼠标经过时脱离了 hover 区域。
- 典型现象：二级菜单弹出后，鼠标从一级项移到二级菜单途中，菜单突然收起
- 根本原因：一级
li和二级ul之间有垂直/水平间隙（哪怕只有 1px） - 解决方法：把二级
ul的margin-top设为负值（如margin-top: -1px），或给父li加padding-bottom: 1px补齐空隙 - 更稳的结构是让二级
ul成为一级li的直接子元素，并用top: 100%紧贴其底边，不依赖 margin 对齐
移动端 touch 设备上 hover 失效，怎么兼容？
CSS :hover 在 iOS 和部分 Android 上只在点击后短暂触发，不能当菜单开关用。
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 方案几乎不可靠：iOS Safari 对嵌套
:hover支持极差，三级菜单基本点不开 - 必须配合 JS 切换 class，比如监听
touchstart给当前li加is-open，再用.is-open > ul显示子菜单 - 别忘了同时支持
click（PC）和touchstart（移动），但注意防止双触发，可用if ('ontouchstart' in window)分流 - 键盘导航（Tab 键）也得考虑：用
:focus-within替代部分:hover，否则残障用户无法操作
多级浮动菜单真正的难点不在定位公式，而在父子容器的 position 链是否完整、DOM 间隙是否被视觉忽略、以及 touch/click/focus 三种交互路径有没有被同一套逻辑覆盖。漏掉任意一环，用户就会卡在第二级出不去。
