二级菜单点开即消失是因为:hover仅作用于悬停元素，移出li或a时下拉区域失去hover状态；需将ul设为li直接子元素、li设position:relative、ul设position:absolute且top:100%、消除所有间隙。
hover 触发的二级菜单为什么点开就消失
因为 :hover 只作用于当前鼠标悬停的元素，一旦移出 <li> 或 <a></a>，下拉区域（通常是 <ul></ul>）就不再被 hover 覆盖，导致瞬间收起。关键不是“怎么显示”，而是“怎么保持悬停态连续”。
必须让一级菜单项（<li>）和它的二级菜单（<ul></ul>）处于同一个 hover 容器内，且二级菜单要紧贴一级项、不留空隙：
- 二级
<ul></ul>必须是该<li>的直接子元素或相邻兄弟（推荐直接子元素） -
<li>需设position: relative，二级<ul></ul>用position: absolute定位，避免脱离文档流造成悬停中断 - 上下边距/间隙必须为 0 —— 即使 1px 的空白也会导致 mouseout
纯 CSS 下拉菜单的核心结构与样式规则
HTML 结构必须满足父子嵌套关系，例如：
<nav>
<ul class="nav">
<li><a href="#">首页</a></li>
<li class="has-sub">
<a href="#">产品</a>
<ul class="sub-menu">
<li><a href="#">Web 端</a></li>
<li><a href="#">移动端</a></li>
</ul>
</li>
</ul>
</nav>对应 CSS 要点：
立即学习“前端免费学习笔记（深入）”；
-
.has-sub:hover .sub-menu控制显隐，不能写成.has-sub:hover ul（太宽泛，可能误触） -
.sub-menu默认设display: none，hover 时改为display: block（注意：不要用visibility: hidden，它仍占布局空间且无法触发 hover） -
.sub-menu必须加top: 100%和left: 0，确保从一级菜单底部正下方展开 - 若一级菜单有 padding，二级菜单的
top建议用top: calc(100% + 1px)微调，避免因渲染差异产生缝隙
移动端兼容性与 hover 失效问题
在 iOS Safari 和多数安卓浏览器中，:hover 在触摸设备上行为不可靠：首次点击可能触发 hover，但随后不维持，或根本无响应。
纯 CSS 方案在移动端本质不可用，这不是写法问题，而是规范限制。如果必须支持触屏设备：
- 放弃纯 CSS，改用
click+ JavaScript 切换class（如is-open） - 或使用媒体查询兜底：
@media (hover: hover) and (pointer: fine)包裹 hover 样式，仅对精准指针设备启用 - 切勿依赖
:focus-within模拟 —— 它需要可聚焦元素且键盘用户路径不自然，对鼠标用户无效
常见错误：z-index 不生效、菜单被遮挡
下拉菜单被顶部 banner、轮播图或固定定位 header 盖住，90% 是因为 z-index 层级没理清，而不是数值不够大。
-
z-index只对定位元素（position为relative/absolute/fixed）有效，父容器没设 position，子元素的 z-index 再高也无效 - 确保
.has-sub有position: relative，且其z-index高于遮挡它的兄弟容器 - 避免全局设
* { z-index: 1 }—— 这会污染层叠上下文，引发不可预测的覆盖顺序 - 调试时用浏览器开发者工具检查“Layers”面板，确认菜单是否在独立层叠上下文中
hover 下拉菜单的脆弱性在于它完全依赖 DOM 结构连续性和渲染像素精度，稍有 margin/padding/transform/border-radius 就可能断连。真正在生产环境用，建议只用于桌面端辅助导航，主交互路径别只靠它。
