菜单hover闪退因:hover仅作用于父li而子菜单脱离其边界，应改为.menu > li:hover .submenu；display:none不可过渡，需用opacity+transform；移动端需js处理click并阻止冒泡；多级菜单需每级li设position:relative。
菜单 hover 时子菜单闪退，:hover 作用域写错了
常见现象是鼠标一移向子菜单，它就立刻消失。根本原因是 :hover 只加在了父级 <li> 上，而子菜单（比如 <ul class="submenu"></ul>）是脱离父 <li> 的独立块级元素，鼠标离开父 <li> 边界、还没进入子菜单时，:hover 状态已丢失。
正确做法是把触发逻辑放在父容器（通常是 <li>）上，并确保子菜单是它的直接后代：
.menu > li:hover .submenu {
display: block;
}
注意：.submenu 必须嵌套在 <li> 内部，不能放在外面；否则 CSS 选择器无法捕获“悬停父项时显示兄弟节点”的行为（CSS 无向上或跨兄弟选择器）。
用 transition 做淡入滑动，但动画不生效
子菜单默认设为 display: none，这是最常踩的坑——display 是不可过渡的属性，无论怎么写 transition: all 0.3s 都不会动。
替代方案是用 opacity + transform 控制显隐和位移，同时保持元素始终在文档流中（或用 visibility 配合 height 过渡）：
- 推荐组合：
opacity: 0/opacity: 1+transform: scaleY(0)/transform: scaleY(1) - 对应过渡：
transition: opacity 0.2s ease, transform 0.2s ease - 别忘了给子菜单设
transform-origin: top，否则缩放会从中心开始，视觉错位 - 若用
height，必须指定具体像素值（height: 0→height: 200px），百分比或auto不可过渡
移动端点击展开菜单，click 事件被忽略
纯 CSS 实现不了点击切换（:checked + 隐藏 checkbox 是一种 hack，但语义差、可访问性弱）。JavaScript 是必要手段，尤其要处理移动端 touch 和桌面 click 兼容。
关键点：
- 监听
click即可覆盖 touch 设备（现代浏览器中click在 touch 后约 300ms 触发，足够用；无需额外绑定touchstart） - 用
event.stopPropagation()防止点击子菜单时意外收起父菜单 - 避免对整个
.menu绑定事件，应只委托到有子菜单的<li>，例如：document.querySelector('.menu').addEventListener('click', e => { if (e.target.closest('li.has-submenu')) { ... } }) - 记得用
aria-expanded切换状态，提升屏幕阅读器体验
多层嵌套菜单定位偏移，position: absolute 没找对参考父级
二级菜单能弹出，三级菜单却飞到页面左上角——大概率是某个中间 <li> 缺少 position: relative。CSS 中 absolute 定位永远找离它最近的、position 为 relative / absolute / fixed 的祖先，而不是 DOM 层级上的“父节点”。
检查顺序：
- 每级要展开的
<ul></ul>必须由带position: relative的<li>包裹 - 不要依赖
<nav></nav>或<ul class="menu"></ul>设relative，它们通常离得太远 - 如果用了 Flex 布局，确认没意外触发
min-width: auto导致容器塌缩，使relative失效
复杂菜单真正的难点不在动画或 JS，而在层级关系是否干净、定位上下文是否明确。一个没设 relative 的 <li> 就能让整层子菜单失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
