移动端不支持:hover伪类，需用@media (hover: hover) and (pointer: fine)限定桌面端，菜单展开必须JS兜底并配合:focus-within和data属性控制状态。
hover 伪类在移动端根本不会触发
响应式菜单里写 :hover，结果在手机上点不动、没反应——不是你代码错了，是浏览器压根不支持。移动端没有“悬停”这个概念，触摸屏只有 touchstart 和点击事件，:hover 只会在首次触摸后短暂生效（iOS Safari 甚至要等 300ms 延迟），接着就失效了。
- 别把
:hover当作菜单展开的唯一条件，尤其不能只靠它控制display: none → block - 真要用
:hover，必须搭配媒体查询限定仅桌面端：@media (hover: hover) and (pointer: fine) - 这个媒体查询才是现代判断“有精确指针且支持悬停”的标准方式，比
min-width更可靠
用 @media (hover: hover) 安全启用悬停交互
这个媒体查询不是可有可无的装饰，它是 CSS 层面识别“设备是否真正支持 hover”的唯一靠谱手段。不加它，你的 :hover 样式会在 iPad 或折叠屏上意外激活，造成菜单闪退或误操作。
- 写法必须完整：
@media (hover: hover) and (pointer: fine) { .menu-item:hover > .submenu { display: block; } } -
pointer: fine排除触控笔精度低的设备（比如某些安卓平板），避免误判 - 不要只写
@media (hover: hover)单独一层——部分旧浏览器会错误匹配，导致移动端也加载 hover 样式
菜单展开逻辑不能只靠 CSS，JS 得兜底
纯 CSS 实现的响应式菜单，一旦用户缩放页面、切到分屏模式、或系统开启强制减少动画，:hover 就可能失效或延迟。这时候菜单卡住、子项不收起，用户就懵了。
- 给菜单容器加一个
data-menu-state="closed"属性，用 JS 控制开关，CSS 只负责视觉状态 - 监听
click和keydown（回车/空格），确保键盘用户也能操作 - 在
resize事件里重置移动端菜单状态，防止横竖屏切换后状态错乱 - 示例：点击父项时，先
event.preventDefault()，再toggleAttribute('data-expanded')，CSS 用[data-expanded]匹配
伪类组合容易被忽略的层叠顺序问题
:hover 和 :focus 同时存在时，如果没写对顺序，焦点态会被悬停态覆盖，键盘用户 tab 进去却看不到高亮。
立即学习“前端免费学习笔记（深入）”；
- CSS 伪类顺序必须是
:link → :visited → :focus → :hover → :active（LoVe HAte 记忆法） - 响应式菜单里常见错误：写了
.menu-item:hover .submenu，但没写.menu-item:focus-within .submenu，导致键盘无法展开 -
:focus-within是关键替代方案，它能在子元素获得焦点时激活父容器样式，兼容性到 Chrome 65+/Firefox 61+，足够覆盖主流环境
hover 当成可选增强，而不是功能前提。 
