hover 触发的多级菜单为什么鼠标一移就收起来了
根本原因是 :hover 只作用于当前元素，子菜单如果和触发元素有物理间隙（比如 margin、border 或父容器 overflow 隐藏），鼠标从触发项移到子菜单途中会离开 :hover 区域，导致样式立刻失效。这不是 bug，是 CSS 的层叠行为决定的。
实操建议：
- 确保触发项（如
.menu-item）和下拉菜单（如.submenu）在 DOM 中是父子关系，且视觉上无缝衔接——菜单 top 值应紧贴触发项 bottom，不要留空隙 - 给父容器加
overflow: visible（默认是 visible，但若父级设了 hidden/scroll 就会裁剪子菜单） - 避免用
margin-top拉开子菜单，改用top+position: absolute定位
子代选择器（>）和后代选择器（ ）在菜单里的区别
写成 .menu > .menu-item:hover > .submenu 和 .menu .menu-item:hover .submenu 看似只差一个 >，但行为完全不同：前者只响应「直接子项」的 hover，后者会穿透多层嵌套匹配任意后代。多级菜单必须用后代选择器，否则二级菜单里的三级菜单根本不会显示。
常见错误现象：.submenu 在二级菜单里不展开，检查是否误用了 > 把选择器写死了层级
实操建议：
- 一级菜单用
.nav > .item:hover .submenu - 二级及更深菜单统一用
.submenu:hover .submenu（注意不是> .submenu） - 所有
.submenu必须初始设为display: none，hover 时才display: block或flex
移动端 touch 设备上 hover 不生效怎么办
CSS :hover 在 iOS 和 Android 大部分浏览器中仅对可点击元素（如 、）有延迟触发，且无法可靠支持多级展开——手指点一下只触发一级，再点没反应，因为没有“悬停”概念。
使用场景：纯 CSS 方案只适合桌面端；只要需兼容手机，就必须引入 JS 控制 class 切换
实操建议：
- 保留 CSS hover 作为桌面端降级方案，同时用 JS 绑定
click或touchstart事件 - 给菜单项加
role="button"并监听click，切换.is-open类，CSS 写.is-open .submenu { display: block; } - 避免同时监听 hover 和 click，否则桌面端点开会反复开关（可加
if ('ontouchstart' in window)分流）
用 transition 做淡入滑动动画时的坑
display: none → block 无法过渡，所以不能直接对 display 加 transition；想实现渐显+下滑，得组合用 opacity、transform 和 max-height，但三者表现逻辑不同。
性能影响：用 max-height 过渡要预设一个足够大的值（如 max-height: 500px），否则动画会卡顿；用 transform: scaleY() 更流畅，但需配合 transform-origin: top 才能从上往下展开
实操建议：
- 优先用
opacity+transform: scaleY(0) → scaleY(1)，性能最好 - 若内容高度差异大，改用
height: 0 → auto+overflow: hidden，但必须 JS 测高后设内联 style，CSS 无法自动过渡到 auto - 所有过渡属性必须写在
.submenu上，而不是 hover 触发元素上
复杂点在于：hover 是瞬时状态，而动画需要时间；一旦鼠标移出，CSS 会立刻开始反向过渡——这意味着你得确保子菜单的 :hover 区域足够宽、足够连续，否则动画还没播完菜单就收了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
