hover菜单飘到左上角是因为内部ul缺少已定位祖先，需给外层li设position: relative；右展用left: 100%而非right: 0；移动端需JS或@media渐进增强。
为什么 hover 菜单总飘到页面左上角？
因为内部 ul 没有参照物——position: absolute 会找最近的「已定位祖先」，如果外层 li 是默认的 static，那就一路往上找到 body 或根元素，自然就偏了。
- 必须给外层
li加position: relative（或absolute/fixed），它才会成为内部ul的定位上下文 - 不要只加
display: block或z-index，这些不触发定位上下文 - 如果父级
ul本身用了position: relative，而你又没给li单独设，那子菜单就会相对于整个导航栏定位，不是当前项
怎么让菜单刚好贴在列表项右侧展开？
靠 left 和 top 微调，但关键在起点：默认 top: 0; left: 0 会让菜单左上角和 li 左上角重合。你要的是“右对齐展开”，所以得用 left: 100% 把菜单左边缘推到 li 右边缘，再用 top: 0 对齐顶部。
-
left: 100%是核心，不是right: 0（后者是相对于父容器右边界） - 如果菜单需要下拉+右展（比如二级菜单在右、三级在下），就组合
top: 0; left: 100%，再加margin-top微调垂直偏移 - 注意边框/内边距会影响实际位置：如果
li有padding-right，left: 100%仍以 content box 为基准，不会自动避开 padding
hover 触发不了？检查这三处常见断点
菜单写对了，但悬停没反应，大概率卡在 DOM 结构或 CSS 层级上。
-
ul必须是li的直接子元素（li > ul），如果中间隔了div或span，li:hover ul就失效 -
ul默认display: none，但别用visibility: hidden配合hover切换——它仍占布局空间，且visibility不支持过渡动画 - z-index 生效前提：该元素必须是定位元素（
position不为static），否则z-index被忽略；菜单层级要高于相邻兄弟元素，否则被盖住
移动端点击区域小、悬停失效怎么办？
CSS :hover 在触摸设备上不可靠，尤其 iOS Safari 会延迟触发甚至跳过。不能只依赖 hover。
立即学习“前端免费学习笔记（深入）”；
- 给
li加cursor: pointer是提示，但解决不了本质问题 - 真要兼容触屏，得用 JS 监听
click或touchstart，切换一个 class（比如is-open），再用.li.is-open > ul控制显示 - 如果坚持纯 CSS，可加
@media (hover: hover) and (pointer: fine)做渐进增强，把 hover 样式包在里面，避免触屏设备误加载
position: absolute 的定位参考逻辑很严格，差一层 relative，菜单就彻底脱钩；而触屏场景下，:hover 本质上是个“伪交互”，得提前想好降级路径。 
