纯CSS下拉菜单悬停交互可行，需满足结构嵌套正确（子ul必须为li的最后一个子节点）和定位链完整（父li设position:relative，子ul设position:absolute;top:100%）；多级需扩展:hover选择器范围；移动端须用@media检测并改用JS切换is-open类。
纯 CSS 实现下拉菜单悬停交互是可行的，但必须满足两个硬性前提：结构嵌套正确、定位链完整。否则鼠标一移就“闪退”，不是代码写得不够多，而是 hover 作用域断了。
HTML 结构必须用嵌套 <ul> + <li>，不能靠 <div> 平级拼接
常见错误是把子菜单写成和父项同级的 <div class="submenu">，然后靠 CSS 用 .menu-item:hover + .submenu 控制显隐——这在多级场景下必然失效，因为子菜单一旦脱离父 <li> 的 DOM 包裹，hover 状态就无法穿透。
- ✅ 正确结构：每个
<li>内部直接包含子<ul>，且该子<ul>是其**最后一个子节点** - ⚠️ 错误结构：
<li><a>Products</a></li><ul class="submenu">...</ul>（子菜单在<li>外面） - 子
<ul>必须加class（如submenu），避免用ul ul这类宽泛选择器，否则三级菜单会意外被一级样式覆盖
:hover 显隐必须配合 position: relative 和 position: absolute
仅靠 display: none/block 不足以让菜单“贴着父项下方出现”。如果父 <li> 没设 position: relative，子 <ul> 的 position: absolute 会以 body 为参考系，飘到左上角。
- 父
<li>必须有position: relative（哪怕没其他定位需求） - 子
<ul>设position: absolute; top: 100%; left: 0;才能紧贴父项底部对齐 - 避免用
margin-top或transform微调位置——它们不改变文档流，但可能造成 hover 区域断裂（鼠标经过间隙时菜单消失）
多级菜单悬停不中断的关键：子菜单自身也要参与 :hover 触发
二级菜单（.submenu）显示后，鼠标从一级 <li> 移向它时，父级 :hover 状态解除，导致“闪退”。解决方法不是加 JS，而是扩展 hover 选择器范围。
立即学习“前端免费学习笔记（深入）”；
- 不要只写
.menu-item:hover .submenu { display: block; } - 要写成：
.menu-item:hover .submenu, .submenu:hover { display: block; } - 如果子菜单里还有三级（
.submenu-2），继续追加：.submenu:hover .submenu-2, .submenu-2:hover { display: block; } - 这个写法依赖 DOM 层级连续——所以回到第一条：HTML 嵌套必须严丝合缝，否则
.submenu:hover根本不会触发
移动端必须禁用 :hover，用 JS 切换 show 类控制显隐
iOS Safari 和多数安卓浏览器在触摸设备上对 :hover 支持不可靠：要么不触发，要么延迟触发，要么点击后残留 hover 状态。桌面端靠 hover，移动端必须切换逻辑。
- 用
@media (hover: none) and (pointer: coarse)检测无 hover 能力的设备 - 在此媒体查询内，把所有
:hover显隐规则清空，改用 JS 绑定click事件切换is-open类 - CSS 中定义
.submenu.is-open { display: block; }，并确保 JS 只打开当前菜单、关闭其他已开菜单 - 别忘了给按钮加
role="button" aria-expanded，兼顾可访问性
最常被忽略的一点：hover 区域断裂往往不是 CSS 写错了，而是 HTML 里父 <li> 和子 <ul> 之间有空格或换行符——这些空白字符会生成 text node，撑开实际可 hover 的区域，导致鼠标经过时短暂失触。压缩 HTML 或用注释消除空白，比调十遍 z-index 更管用。
