求助：仅用CSS点击下拉菜单项隐藏菜单但链接失效的解决方法

核心原因分析 #

你遇到的问题几乎都是纯CSS下拉菜单的常见实现逻辑（依赖checkbox/label或:focus伪类）干扰了链接的点击事件，具体分两种最常见的情况：

1. 链接被包裹在<label>标签内：点击链接时，浏览器优先触发label的点击事件（切换checkbox状态），菜单瞬间隐藏，浏览器中断了链接的跳转流程——因为触发跳转的元素已被隐藏，导航动作被放弃。
2. CSS逻辑导致链接点击事件被阻断：比如给菜单父元素设置了pointer-events: none，或者用display: none瞬间隐藏菜单，让浏览器来不及处理链接的导航请求。

针对性解决方案 #

方案1：修复HTML结构（解决label包裹链接的问题）

如果你的代码是把菜单和链接都放在<label>内部（如下错误示例）：

<!-- 错误结构 -->
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle">
  <span>菜单按钮</span>
  <ul class="dropdown-menu">
    <li><a href="/page1">跳转页面1</a></li>
  </ul>
</label>

修改为独立结构：让label只负责触发菜单开关，链接单独放在菜单容器中：

<!-- 正确结构 -->
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle">菜单按钮</label>
<ul class="dropdown-menu">
  <li><a href="/page1">跳转页面1</a></li>
</ul>

对应的CSS保持用:checked伪类控制菜单显示：

#menu-toggle { display: none; }
.dropdown-menu {
  display: none;
  /* 其他菜单样式 */
}
#menu-toggle:checked ~ .dropdown-menu {
  display: block;
}

方案2：调整CSS避免跳转被中断（解决display:none的问题）

如果必须保留原有结构，或者display: none导致跳转失效，改用opacity + visibility + pointer-events的组合代替display: none，让菜单视觉隐藏但DOM仍存在，给浏览器足够时间处理跳转：

.dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  /* 其他菜单样式 */
}
#menu-toggle:checked ~ .dropdown-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

方案3：修复pointer-events属性问题

如果菜单父元素被设置了pointer-events: none（用于点击穿透），给链接单独恢复点击事件：

.dropdown-menu a {
  pointer-events: auto;
}

内容的提问来源于stack exchange，提问作者Octavio Masomenos