如何在HTML/CSS中修复下拉菜单位置，使其对齐Other标签？

问题说明 #

下拉菜单与“Other”标签存在轻微错位偏移，需将其对齐到“Other”标签正下方，并添加指向该标签的箭头，同时修复点击时位置错误的问题。

修复方案 #

核心修改思路 #

1. 让下拉菜单以“Other”链接为基准居中对齐，而非对齐父容器
2. 调整箭头位置，使其精准指向“Other”标签下方
3. 优化下拉菜单与箭头的间距，同时完善tooltip隐藏逻辑

修改后的CSS代码 #

/* Parent container to handle relative positioning */
.dropdown {
  position: relative;
  display: inline-block;
}

/* 给链接添加相对定位，为箭头定位提供基准 */
.navbar-link {
  position: relative;
  display: inline-block;
}

/* Dropdown content */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-top: 8px; /* 调整箭头与下拉菜单的间距 */
  border-radius: 5px;
  /* 让下拉菜单居中对齐Other标签 */
  left: 50%;
  transform: translateX(-50%);
}

/* 添加指向Other标签的箭头 */
.dropdown-content::before {
  content: "";
  position: absolute;
  bottom: 100%;
  /* 箭头位置对齐链接中心 */
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #f1f1f1 transparent;
  /* 给箭头添加阴影，与下拉菜单风格统一 */
  filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.1));
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Add blue color on hover */
.dropdown-content a:hover {
  background-color: #e0e7ff;
  color: #007bff;
}

/* Add blue color when active (clicked) */
.dropdown-content a:active {
  background-color: #c3dafe;
  color: #0056b3;
}

/* Show the dropdown menu */
.show {
  display: block;
}

/* 修复tooltip与下拉菜单的显示冲突 */
.tooltip.disabled .tooltiptext {
  display: none;
}

完整代码示例 #

HTML部分

<li class="dropdown">
  <div class="tooltip" id="otherTooltip">
    <a href="javascript:void(0);" onclick="toggleDropdown('otherDropdown')" class="navbar-link">Other</a>
    <span class="tooltiptext">Remain Taps</span>
  </div>
  <div id="otherDropdown" class="dropdown-content">
    <a href="https://discord.gg/NmqGZjr2">Discord Server</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</li>

<script>
    // Toggle dropdown visibility and disable tooltip when shown
    function toggleDropdown(id) {
      const dropdown = document.getElementById(id);
      const tooltip = document.getElementById('otherTooltip');
      dropdown.classList.toggle("show");
      tooltip.classList.toggle("disabled"); // Disable tooltip when dropdown is shown
    }

    // Close the dropdown menu if the user clicks outside of it
    window.onclick = function(event) {
      if (!event.target.matches('.navbar-link')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        for (var i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
            document.getElementById('otherTooltip').classList.remove('disabled'); // Re-enable tooltip
          }
        }
      }
    }
</script>

CSS部分

<style>
/* Parent container to handle relative positioning */
.dropdown {
  position: relative;
  display: inline-block;
}

/* 给链接添加相对定位，为箭头定位提供基准 */
.navbar-link {
  position: relative;
  display: inline-block;
}

/* Dropdown content */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-top: 8px; /* 调整箭头与下拉菜单的间距 */
  border-radius: 5px;
  /* 让下拉菜单居中对齐Other标签 */
  left: 50%;
  transform: translateX(-50%);
}

/* 添加指向Other标签的箭头 */
.dropdown-content::before {
  content: "";
  position: absolute;
  bottom: 100%;
  /* 箭头位置对齐链接中心 */
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #f1f1f1 transparent;
  /* 给箭头添加阴影，与下拉菜单风格统一 */
  filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.1));
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Add blue color on hover */
.dropdown-content a:hover {
  background-color: #e0e7ff;
  color: #007bff;
}

/* Add blue color when active (clicked) */
.dropdown-content a:active {
  background-color: #c3dafe;
  color: #0056b3;
}

/* Show the dropdown menu */
.show {
  display: block;
}

/* 修复tooltip与下拉菜单的显示冲突 */
.tooltip.disabled .tooltiptext {
  display: none;
}
</style>

内容的提问来源于stack exchange，提问作者D. Luffy