本文针对纯 CSS 构建的移动端下拉导航（如汉堡菜单+多级 .onclick-menu）中“子菜单展开后点击即消失、链接始终无法触发”的典型问题，给出基于 :focus-within 的零 JavaScript 修复方案，并详解原理、代码调整与兼容性保障。

本文针对纯 css 构建的移动端下拉导航（如汉堡菜单+多级 `.onclick-menu`）中“子菜单展开后点击即消失、链接始终无法触发”的典型问题，给出基于 `:focus-within` 的零 javascript 修复方案，并详解原理、代码调整与兼容性保障。

在你提供的代码中，下拉菜单的显示逻辑依赖于父级

获取焦点（:focus），进而通过 .onclick-menu:focus .onclick-menu-content 触发子菜单可见。这种设计看似简洁，却存在一个根本性交互缺陷：当用户点击子菜单中的 链接时，焦点会立即从父容器转移到链接本身（或因页面跳转而丢失），导致父元素失焦 → 子菜单瞬间 display: none / visibility: hidden → 点击事件被中断，链接实际未被激活。

这并非路径错误、HTML 结构异常或服务器配置问题，而是 CSS 焦点管理机制与用户操作流不匹配所致。

✅ 正确解法：用 :focus-within 替代 :focus

:focus-within 是现代 CSS 的关键伪类——它表示该元素自身获得焦点，或其任意后代元素获得焦点。这意味着：当用户点击子菜单中的链接时，.onclick-menu 仍满足 :focus-within 条件（因为 是其后代且已聚焦），子菜单将保持可见，直至链接完成跳转。

请将原 CSS 中这一段：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.onclick-menu:focus .onclick-menu-content {
    opacity: 1;
    visibility: visible;
    display: inherit;
    pointer-events: auto;
}

替换为：

.onclick-menu:focus-within .onclick-menu-content,
.onclick-menu:hover .onclick-menu-content {
    opacity: 1;
    visibility: visible;
    display: block; /* 推荐使用 block 而非 inherit，语义更明确 */
    pointer-events: auto;
}

? 补充 :hover 是增强体验的关键：在桌面端或支持 hover 的设备上，悬停也能展开菜单，提升可发现性；而 :focus-within 则确保触屏/键盘用户的点击链路完整。

⚠️ 同时需修正的配套 CSS

1. 移除破坏焦点链的规则：
   原 CSS 中存在 .onclick-menu:focus { pointer-events: none; } —— 这会直接禁用父容器的所有鼠标事件（包括子元素冒泡），必须删除：

   /* ❌ 删除这一行 */
   /* .onclick-menu:focus { pointer-events: none; } */

2. 确保子菜单具备可点击区域：
   为避免因 opacity: 0 / visibility: hidden 导致点击穿透，建议显式启用指针事件：

   .onclick-menu-content {
       display: none;
       opacity: 0;
       visibility: hidden;
       transition: opacity 0.3s ease, visibility 0.3s ease;
       /* 关键：即使隐藏状态也保留事件捕获能力（可选，提升健壮性）*/
       pointer-events: none;
   }
   .onclick-menu:focus-within .onclick-menu-content,
   .onclick-menu:hover .onclick-menu-content {
       display: block;
       opacity: 1;
       visibility: visible;
       pointer-events: auto; /* ✅ 展开时恢复交互 */
   }

3. HTML 微调（推荐）：
   为符合语义化与可访问性（a11y），建议将触发器

   改为 ，并添加 aria-haspopup="true" 和 aria-expanded 动态控制（若后续引入 JS）：

   <button type="button" tabindex="0" class="onclick-menu" aria-haspopup="true" aria-expanded="false">
       Über uns
       <ul class="onclick-menu-content" aria-label="Untermenü zu Über uns">
   <li><a href="../ueber-uns.php#geschichte">Geschichte</a></li>
           <!-- ... -->
       </ul></button>

   ? 兼容性说明与降级策略

   • :focus-within 已被所有现代浏览器支持（Chrome 60+、Firefox 52+、Safari 15.4+、Edge 79+）。截至 2026 年，全球主流浏览器覆盖率 >98.7%（CanIUse 数据）。
   • 若需支持旧版 Safari（// 简单 polyfill：为 .onclick-menu 添加 focusin/focusout 监听 document.querySelectorAll('.onclick-menu').forEach(el => { el.addEventListener('focusin', () => el.classList.add('focus-within')); el.addEventListener('focusout', () => el.classList.remove('focus-within')); });

     并在 CSS 中增加：

     .onclick-menu.focus-within .onclick-menu-content { /* 同上展开样式 */ }

   ✅ 最终验证要点

   检查项	正确表现
   ✅ 点击“Über uns” → 子菜单展开	:focus-within 生效，菜单可见
   ✅ 将鼠标移入子菜单项	菜单不闪退，悬停高亮正常
   ✅ 点击任意子链接（如 #geschichte）	页面平滑跳转，无闪烁/中断
   ✅ 键盘 Tab 导航至“Über uns”→ Enter → 方向键进入子菜单	完全可访问

   ? 核心原则：纯 CSS 下拉菜单的可靠性，取决于焦点生命周期是否覆盖用户完整操作路径。:focus-within 正是为此而生的标准解决方案——无需框架、不侵入 HTML 结构、零运行时开销，是现代前端构建健壮导航组件的必备知识。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！