本文针对纯 CSS 实现的响应式导航栏（含汉堡菜单与多级下拉）中“子菜单链接点击无效”这一高频问题，从聚焦机制缺陷切入，详解 :focus 与 :focus-within 的本质差异，并提供零 JS、兼容现代浏览器的精准修复方案。
本文针对纯 css 实现的响应式导航栏（含汉堡菜单与多级下拉）中“子菜单链接点击无效”这一高频问题，从聚焦机制缺陷切入，详解 `:focus` 与 `:focus-within` 的本质差异，并提供零 js、兼容现代浏览器的精准修复方案。
在你提供的代码中，下拉子菜单（.onclick-menu-content）的显示逻辑完全依赖于父容器 .onclick-menu 的 :focus 状态：
.onclick-menu:focus .onclick-menu-content {
opacity: 1;
visibility: visible;
display: inherit;
pointer-events: auto;
}
该写法看似合理——点击 .onclick-menu（一个带 tabindex="0" 的
这是纯 CSS 下拉菜单中最典型的「焦点丢失陷阱」，其根源是 :focus 只作用于当前获得焦点的单个元素，不具备“焦点驻留穿透”能力。
✅ 正确解法：使用 :focus-within 伪类
:focus-within 是 CSS Level 4 标准特性，当该元素自身或其任意后代元素获得焦点时，该选择器即匹配。这意味着：只要子菜单中的链接（）被聚焦（例如点击、Tab 键导航），父容器 .onclick-menu 仍保持匹配状态，子菜单持续可见，用户可顺利完成点击跳转。
? 修复步骤（仅需两处修改）：
-
替换 CSS 中的 :focus 为 :focus-within：
/* ✅ 替换前（失效） */ .onclick-menu:focus .onclick-menu-content { /* ... */ }
/ ✅ 替换后（生效） / .onclick-menu:focus-within .onclick-menu-content { opacity: 1; visibility: visible; display: block; / 建议显式设为 block，避免 inherit 引发布局歧义 / pointer-events: auto; }
2. **确保子菜单 `<a>` 元素可获得焦点（默认已满足）**
HTML 中的 `</a><a href="...">` 天然支持聚焦（无需额外 `tabindex`），因此无需改动 HTML 结构。
? 补充优化建议（提升健壮性与可访问性）：
- **移除冗余的 `display: inherit`**：`inherit` 在此语境下行为不可控（可能继承 `none` 或 `inline`），统一设为 `display: block` 更可靠；
- **为子菜单添加 `z-index`**：防止被其他绝对定位元素遮挡；
- **增强键盘导航支持**：为 `.onclick-menu` 添加 `outline: none` 时，务必用 `:focus-visible` 提供替代焦点样式，保障 WCAG 合规性；
- **渐进增强兼容性**：`:focus-within` 在 Chrome 60+、Firefox 61+、Safari 15.4+、Edge 79+ 中原生支持。如需支持旧版 Safari（ {
el.addEventListener('click', function(e) {
// 阻止点击 </a><a> 时冒泡关闭菜单
if (e.target.tagName === 'A') return;
this.classList.toggle('active');
});
});</a>
对应 CSS：
.onclick-menu.active .onclick-menu-content,
.onclick-menu:focus-within .onclick-menu-content {
opacity: 1;
visibility: visible;
display: block;
}
✅ 最终验证要点：
- 点击「Über uns」→ 子菜单展开 → 点击「Geschichte」→ 页面正常跳转至 ../ueber-uns.php#geschichte；
- 使用 Tab 键导航：聚焦到「Über uns」→ 按 ↓ 键应能顺序进入子菜单链接；
- 移动端触摸点击：无延迟、无闪退，体验连贯。
⚠️ 注意：切勿在 .onclick-menu 上设置 pointer-events: none 或 overflow: hidden，这会直接阻断事件传递；同时检查外层容器（如 #menu）是否设置了 overflow: hidden——它会裁剪子菜单内容，造成“菜单存在但不可见”的假象。
通过将 :focus 升级为 :focus-within，你不仅解决了链接点击失效问题，更让菜单真正具备了无障碍友好的焦点管理能力。这一改动轻量、精准、符合现代 CSS 实践，是纯 CSS 下拉导航走向生产可用的关键一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
