本文针对纯 CSS 构建的移动端下拉导航（如汉堡菜单+多级 .onclick-menu）中“子菜单链接点击无效”这一高频问题，直击根源：:focus 伪类在子元素点击时导致父容器失焦、菜单闪退，提出以 :focus-within 替代的标准化修复方案，并附可直接运行的代码优化与关键注意事项。
本文针对纯 css 构建的移动端下拉导航（如汉堡菜单+多级 `.onclick-menu`）中“子菜单链接点击无效”这一高频问题，直击根源：`:focus` 伪类在子元素点击时导致父容器失焦、菜单闪退，提出以 `:focus-within` 替代的标准化修复方案，并附可直接运行的代码优化与关键注意事项。
在纯 CSS 实现的响应式导航中（尤其常见于 CodePen 类代码片段），开发者常借助 tabindex="0" + :focus 触发下拉菜单显示，例如您代码中的这段逻辑：
.onclick-menu:focus .onclick-menu-content {
opacity: 1;
visibility: visible;
display: inherit;
pointer-events: auto;
}该写法看似简洁——当用户点击或按 Tab 键聚焦到 <div class="onclick-menu"> 时，其内部的 .onclick-menu-content 即展开。但致命缺陷在于交互生命周期管理缺失：一旦用户尝试点击子菜单中的 <a> 链接，焦点会立即从父 <div> 转移到 <a> 元素自身，导致父级 .onclick-menu 瞬间失去 :focus 状态，CSS 规则失效，.onclick-menu-content 被强制隐藏（display: none / visibility: hidden 回退），链接根本来不及触发跳转。
✅ 根本解法：用 :focus-within 替代 :focus
:focus-within 是现代 CSS 的关键伪类（兼容性良好，Chrome 60+/Firefox 61+/Edge 79+，已覆盖全部主流现代浏览器），它表示该元素自身获得焦点，或其任意后代元素获得焦点。这意味着：
- 点击 .onclick-menu → 它获得焦点 → 子菜单显示；
- 点击子菜单中的 <a> → <a> 获得焦点 → .onclick-menu 仍满足 :focus-within → 子菜单持续可见 → 链接正常跳转。
? 立即生效的修复代码（替换原 CSS）：
立即学习“前端免费学习笔记（深入）”；
/* ✅ 正确：使用 :focus-within，保持菜单稳定展开 */
.onclick-menu:focus-within .onclick-menu-content {
opacity: 1;
visibility: visible;
display: block; /* 建议显式设为 block，避免 inherit 引发不可控继承 */
pointer-events: auto;
}
/* ⚠️ 同时移除或注释掉旧的 :focus 规则，防止冲突 */
/* .onclick-menu:focus .onclick-menu-content { ... } */
/* ? 可选增强：确保子菜单区域可交互（防遮挡） */
.onclick-menu-content {
position: relative; /* 若父级有 transform，需重置层叠上下文 */
z-index: 1000; /* 确保高于其他内容 */
}? 配套 HTML 微调建议（提升健壮性）：
为保障键盘导航无障碍体验，建议将 <div tabindex="0"> 显式包裹 <a> 标签，并为子菜单添加 role="menu" 语义化支持：
<li>
<div tabindex="0" class="onclick-menu" role="button" aria-expanded="false">
Über uns
<ul class="onclick-menu-content" role="menu">
<li role="none"><a href="../ueber-uns.php#geschichte" role="menuitem">Geschichte</a></li>
<li role="none"><a href="../ueber-uns.php#hackerhof" role="menuitem">Der Betrieb heute</a></li>
<!-- 其他项同理 -->
</ul>
</div>
</li>⚠️ 关键注意事项：
- 不要依赖 display: inherit：inherit 会继承父元素的 display 值（可能是 inline 或 block），而下拉菜单通常需 block 才能正确布局。显式声明 display: block 更安全。
- 检查外层 overflow: hidden：若 .mobile-menu 或其祖先容器设置了 overflow: hidden，可能裁剪掉展开的子菜单。可通过 DevTools 检查盒模型，临时移除 overflow 验证。
- 避免 pointer-events: none 意外启用：您原始 CSS 中存在 .onclick-menu:focus { pointer-events: none; } —— 这会直接禁用所有点击事件！请彻底删除此行（它本意可能是想禁用父级点击，但实际会阻断整个交互链）。
- 移动端触摸兼容性：focus-within 在 iOS Safari 和 Android Chrome 中均支持，但需确保 <a> 标签本身可被触摸聚焦（无 touch-action: none 干扰，且未被 pointer-events: none 覆盖）。
✅ 验证方式：
- 打开浏览器 DevTools → Elements 面板；
- 展开 .onclick-menu → 点击其子 <a>；
- 观察 .onclick-menu 元素是否仍保有 :focus-within 状态（DevTools 中会高亮显示匹配的伪类）；
- 确认 .onclick-menu-content 的 display 值为 block 且 visibility 为 visible。
通过将 :focus 升级为 :focus-within，您不仅解决了链接点击失效的核心问题，更构建了一个符合 WCAG 2.1 标准、支持键盘导航与屏幕阅读器的健壮导航结构。无需 JavaScript，纯 CSS 即可实现可靠、可访问、跨设备一致的下拉交互体验。
