纯CSS响应式多级下拉菜单需用@media (hover: none)和(pointer: coarse)判断交互能力，结合:hover与:focus-within实现桌面端悬停/键盘导航、移动端data-open控制显隐，严格处理position、z-index、overflow及无障碍属性。
纯 CSS 实现响应式多级下拉菜单，桌面端靠 :hover + :focus-within，移动端必须降级为点击展开——CSS 本身无法模拟点击状态切换，@media 只能控制显隐，不能接管交互逻辑。
为什么 @media (hover: none) 比 @media (max-width: 768px) 更可靠
设备能力比屏幕尺寸更能决定交互方式。有些折叠屏（如 Galaxy Z Fold）横屏时宽度超 1000px，但 hover 不可用；而某些小屏 Windows 笔记本（1366×768）支持精细指针，hover 完全可用。
-
@media (hover: hover) and (pointer: fine)才启用:hover > .submenu规则 -
@media (hover: none), (pointer: coarse)下禁用所有:hover显隐逻辑，只保留:focus-within和 JS 控制的[data-open="true"] - 别在
@media (max-width: 767px)里写.submenu { display: block; }——这会让所有子菜单默认展开，失去控制权
:hover 和 :focus-within 必须同时写，且每级 <li> 都要加 position: relative
只给一级 <li> 加 position: relative，二级菜单会相对视口定位；没加 :focus-within，键盘用户 Tab 进入后菜单根本不显示。
- HTML 中每一级可展开项都要有
class="has-submenu"，并确保子<ul class="submenu">是其直接子元素 - CSS 规则必须成对出现：
.has-submenu:hover > .submenu和.has-submenu:focus-within > .submenu - 子菜单自身也要设
position: absolute，且top: 100%（一级）、left: 100%（二级起），不能统一写top: 0; left: 0
移动端点击展开必须用 data-open + CSS，别碰 display: none 的 DOM 切换
用 display: none 会导致屏幕阅读器跳过整个子菜单结构，且动画无法过渡。iOS Safari 对 visibility: hidden 的重绘也更稳定。
立即学习“前端免费学习笔记（深入）”；
- JS 只负责切换属性：
el.dataset.open = el.dataset.open === "true" ? "false" : "true" - CSS 控制显隐：
[data-open="true"] .submenu { visibility: visible; opacity: 1; transform: translateX(0); } - 初始状态必须是：
.submenu { visibility: hidden; opacity: 0; transform: translateX(-10px); transition: all 0.25s ease; } - 绝对禁止在媒体查询里写
.submenu { display: block !important; }——它会覆盖 JS 的data-open控制，导致无法收起
z-index 和 overflow: hidden 是多级菜单最常被忽略的两个坑
子菜单被截断、盖不住弹窗、三级菜单飞到左上角……90% 都是这两处出问题，而且浏览器开发者工具里不容易一眼看出。
- 父容器（比如
<nav>或<header>）绝不能设overflow: hidden，否则子菜单会被裁掉 -
z-index只需设两级：导航容器z-index: 100，所有子菜单统一z-index: 101（不是 102、103） - 如果父级用了
transform（如navbar-collapse动画），它会创建新层叠上下文，此时子菜单的z-index只在该上下文内生效，得把z-index: 101提到同级<li>上
真正难的不是写出能展开的菜单，而是让鼠标移过去不闪退、Tab 键能逐级进入、点开后不会误触背后链接、缩放字体时文字不撑破容器——这些细节全在 padding/margin 微调、white-space: nowrap、min-width: 100% 和 aria-expanded 的配合里。
