纯css下拉菜单必须用:focus-within而非:hover，因:hover在触屏无效、键盘不可访问，且display:none导致子菜单失焦收起；:focus-within需包裹可聚焦元素并配合aria-hidden等无障碍属性。
纯 CSS 实现下拉菜单，核心在于利用 :hover 或 :focus-within 触发状态切换，配合 display、visibility 或 opacity 控制显隐 —— 但直接用 display: none + :hover 在移动端无效，且无法实现过渡动画；真正可靠、可交互、带过渡的方案必须依赖 :focus-within 和键盘可访问性设计。
为什么不能只靠 :hover？
鼠标悬停能触发，但触屏设备无 hover 状态，且键盘用户（Tab 导航）完全无法操作。更关键的是：display: none 的元素无法接收 :hover，导致子菜单一展开就失焦、立即收起——这是最常踩的坑。
-
display: none会让元素脱离渲染流，父元素:hover时子菜单还没渲染，自然无法持续悬停 - 用
visibility: hidden+opacity: 0可保留占位和事件区域，但需额外处理点击穿透（加pointer-events: none） - 移动端 Safari 对
:hover支持极不稳定，部分机型首次点击才触发，体验断裂
用 :focus-within 实现键盘+鼠标双支持
该伪类在任意子元素获得焦点时激活父容器，完美适配 Tab 导航和点击展开。前提是菜单项必须是可聚焦元素（如 <a></a> 或带 tabindex="0" 的 <div>）。
<pre class="brush:php;toolbar:false;">.dropdown {
position: relative;
}
.dropdown-menu {
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}
.dropdown:focus-within .dropdown-menu,
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
</pre>
<ul>
<li>必须给触发按钮（如 <code><button></button> 或 <a></a>）设置 tabindex="0"，否则键盘无法聚焦到它
.dropdown 容器需包裹触发按钮和菜单，不能拆成兄弟节点，否则 :focus-within 失效opacity 控制显隐：屏幕阅读器仍会读取 opacity: 0 元素，应配合 aria-hidden="true/false" 动态控制移动端点击穿透与 Safari 兼容补丁
iOS Safari 对 :focus-within 的触发有延迟，且点击后焦点可能快速丢失。解决方案是用 :active 配合 JavaScript 微调，但纯 CSS 下可退而求其次：
- 给触发按钮加
touch-action: manipulation，减少点击延迟 - 菜单
transform比top/left更高效，避免重排；同时加will-change: transform提前提示渲染层 - Safari 15.4+ 支持
:has()，可用.dropdown:has(> button:focus)替代:focus-within，但兼容性仍弱于后者 - 若必须支持老版本 iOS，只能放弃纯 CSS，用
onclick切换 class —— 这不是缺陷，是现实约束
真正难的不是让菜单“动起来”，而是让它的显示/隐藏逻辑在键盘 Tab、屏幕阅读器、触屏点击、悬停移动间保持一致。很多项目卡在无障碍验收，问题往往出在 :focus-within 容器结构没包住可聚焦子元素，或者忘了 aria-expanded 的同步更新 —— 这些没法用纯 CSS 解决，得靠最小量 JS 补齐。
