纯CSS无JS下拉按钮底部区域链接失效问题的代码修复咨询

你的问题出在那个名为.db2的遮罩元素上。当下拉菜单展开时（.dropdown:focus状态），这个透明遮罩会覆盖在下拉按钮区域，虽然它的本意是让你再次点击按钮时关闭菜单，但它的堆叠层级和定位逻辑意外干扰了下拉菜单链接的点击——具体来说，部分链接区域的点击事件被遮罩优先捕获，导致菜单先关闭，链接跳转被中断。另外，.db2设置的tabindex="1"也会干扰焦点流转，进一步加剧了这个问题。

我们可以用CSS的:focus-within伪类替代原来的.dropdown:focus逻辑，不需要额外遮罩元素就能实现点击外部区域关闭菜单，同时点击按钮也能切换菜单状态，还能确保链接的整个区域都能正常触发跳转。下面是修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-color: black;
}
h1 {
  color: white;
}

/* Dropdown container start */
.dropdown {
  display: inline-block;
  position: relative;
  margin: 10px 0 0 0;
}

/* button */
.dropbtn {
  padding: 8px 12px;
  color: white;
  background-color: #121212;
  border: 1.5px solid white;
  border-radius: 3px;
  cursor: pointer;
  transition: 0.25s ease-out;
  /* 确保按钮能获得焦点 */
  outline: none;
  text-decoration: none;
  display: inline-block;
}

/* Dropdown content */
.dropdown .dropdown-content {
  position: absolute;
  border-radius: 3px;
  top: calc(100% + 5px); /* 直接定位在按钮下方，避免计算偏差 */
  left: 0;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: 0.25s ease-out;
}

.dropdown-content a {
  color: black;
  background-color: #f0f0f0;
  border-radius: 3px;
  margin-top: 3px;
  padding: 8px 12px;
  display: block;
  text-decoration: none;
  transition: 0.25s ease-out;
  width: 130px;
}

.dropdown-content a:hover {
  background-color: lightgray;
}

/* show Dropdown content - 使用:focus-within，容器或子元素获得焦点时都保持展开 */
.dropdown:focus-within .dropdown-content {
  outline: none;
  visibility: visible;
  opacity: 1;
  /* 移除translate，因为已经用top直接定位 */
}

.dropbtn:hover,
.dropdown:focus-within .dropbtn {
  background-color: #f0f0f0;
  color: black;
  border: 1.5px solid #f0f0f0;
}

/* 移除原来的.db2遮罩相关样式 */
</style>
</head>
<body>
<h1>My example Website</h1>
<div class="dropdown" title="Open the main menu">
  <!-- 移除.db2元素 -->
  <a class="dropbtn" tabindex="0">My menu</a> <!-- 给按钮添加tabindex确保能获得焦点 -->
  <div class="dropdown-content">
    <a href="javascript:;">Link 1</a>
    <a href="random-en.html">Link 2</a>
    <a href="3d-en.html">Link 3</a>
    <a href="info-en.html">Link 4</a>
    <a href="c_en/hashtag.html">Link 5</a>
  </div>
</div>
</body>
</html>

• 移除了.db2遮罩元素及其样式：这个元素是导致链接点击异常的核心原因，去掉后不会再有元素干扰链接的点击事件。
• 改用:focus-within伪类：这个伪类会在容器（.dropdown）或它的任何子元素获得焦点时触发，意味着：
  • 点击按钮可以展开/关闭菜单（按钮获得焦点时展开，再次点击失去焦点时关闭）
  • 点击下拉菜单里的链接时，菜单会保持展开（因为链接获得焦点，容器处于:focus-within状态）
  • 点击页面其他区域时，菜单会自动关闭（容器失去焦点）
• 调整了dropdown-content的定位：用top: calc(100% + 5px)直接将下拉菜单定位在按钮下方，避免了原来top:50%加translate可能导致的位置偏差，确保菜单和按钮没有重叠。
• 给dropbtn添加了tabindex="0"：确保按钮可以通过键盘或鼠标获得焦点，保证:focus-within逻辑正常工作。

这样修改后，下拉菜单的整个链接区域都能正常触发跳转，同时保持了纯CSS的实现方案，没有使用任何JavaScript。

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