根本原因是:hover仅作用于父li，子菜单脱离其边界导致状态丢失；须将子菜单嵌入父li内部、设position:relative/absolute衔接、用opacity+transform过渡，禁用display:none直接过渡。
hover 触发的多级菜单为什么鼠标一移就消失
根本原因是 display: none 会让子菜单完全脱离文档流，且父级 :hover 范围无法自然延伸到子菜单区域——只要鼠标离开父 <li> 边界，:hover 立即失效，子菜单瞬间隐藏。
解决思路不是“修 hover”，而是让父容器的悬停区域包含子菜单本身：
- 把子菜单（
<ul>）放在父<li>内部，不脱离结构 - 用
position: absolute定位子菜单，但父<li>必须设position: relative做定位上下文 - 确保父
<li>的高度/宽度能“撑开”到覆盖子菜单出现位置（通常靠 padding 或 min-height 预留空间，但更稳妥的是直接让 hover 区域包含子菜单坐标）
display: none + hover 的基础 HTML 结构怎么写才不出错
错误写法：子菜单放在父 <li> 外面、或用 JS 动态插入、或层级嵌套断裂。正确结构必须满足“子菜单是父 <li> 的直接后代”：
<nav>
<ul>
<li><a href="#">产品</a>
<ul><!-- 这个 ul 必须在 li 内 -->
<li><a href="#">Web 端</a></li>
<li><a href="#">移动端</a></li>
</ul>
</li>
</ul>
</nav>关键点：
立即学习“前端免费学习笔记（深入）”；
- 每个下拉项必须是
<li>，不能是<div>或其他标签（否则 CSS 选择器li:hover > ul失效） - 子
<ul>必须紧贴父<li>内部，中间不能有文本节点或空格（某些旧浏览器会因此破坏 :hover 匹配） - 导航最外层建议用
<nav>，语义清晰，也方便后续加 ARIA 属性
纯 CSS 实现时 display: none 和 visibility: hidden 选哪个
必须用 display: none，不用 visibility: hidden：
-
visibility: hidden元素仍占布局空间，会导致父容器高度异常、点击穿透、hover 区域错位 -
display: none彻底移除渲染，配合:hover > ul切换，行为可预测 - 过渡动画不能直接作用于
display，所以如果要淡入，得搭配opacity和transition，但初始状态仍需display: none防止闪现
典型写法：
li ul {
display: none;
opacity: 0;
transition: opacity 0.2s;
}
li:hover > ul {
display: block;
opacity: 1;
}移动端点击展开和 hover 冲突怎么临时绕过
桌面端靠 hover，移动端没 hover，但用户又需要点开二级菜单——纯 CSS 无法监听 click，所以得妥协：
- 加一个
.js-enabled类到<html>，用 JS 检测是否支持touchstart，再切换逻辑 - 更轻量的做法：保留 hover 样式，同时给一级菜单
<a>加href="javascript:;"或role="button"，并用 JS 绑定click切换.open类，CSS 补一句li.open > ul { display: block; } - 注意：不要用
@media (hover: hover)做判断，iOS Safari 对该媒体查询支持不稳定，容易误判
真正难处理的是 hover + click 混合交互：比如桌面端点了某项后，菜单不该立刻收起，得等用户移出再收——这已超出纯 CSS 能力范围，必须引入最小量 JS 状态管理。
