如何消除下拉菜单容器内元素的空白间隙？

问题根源 #

1. 打开列表前的空白：浏览器默认给<p>标签添加了上下外边距（margin），导致dropdown-container内部出现空隙。
2. 打开列表后的顶部空隙：dropdown-list使用relative定位并设置top:100px强制下移，同时JS动态设置top值也会产生额外间距。

具体修改方案 #

1. CSS调整

a {
  color: white;
  text-decoration: none;
  transition: background-color 0.2s;
}

.dropdown-container {
  position: relative;
  background-color: #333;
  color: white;
  text-decoration: none;
  width: 150px;
  text-align: center;
  transition: background-color 0.2s;
}

/* 消除p标签默认外边距，解决打开前的空白 */
.dropdown-container p {
  margin: 0;
  padding: 8px 0; /* 可选：优化点击区域大小 */
}

.dropdown-list {
  position: absolute; /* 改为绝对定位，相对于父容器精准对齐 */
  display: none;
  top: 100%; /* 让列表紧贴容器底部 */
  left: 0;
  list-style-type: none;
  padding: 0;
  margin: 0; /* 消除列表默认外边距 */
  background-color: #b0b0b0;
  color: black;
  width: 100%; /* 继承父容器宽度，避免手动设置不一致 */
  text-align: center;
  transition: background-color 0.2s;
}

.dropdown-list li:hover {
  background-color: #04AA6D;
  transition: background-color 0.2s;
}

.dropdown-list li {
  color: black;
  text-align: center;
  transition: background-color 0.2s;
  padding: 8px 0; /* 可选：优化点击区域大小 */
}

/* 修正列表链接颜色，确保在灰色背景下可见 */
.dropdown-list li a {
  color: black;
}

2. JS调整

移除动态设置top的代码，因为绝对定位已通过CSS完成正确对齐：

function toggleVisibility(link) {
  var list = link.parentElement.nextElementSibling;

  if (list.style.display === "none") {
    // 隐藏所有其他列表
    var otherLists = document.querySelectorAll(".dropdown-list");
    for (var i = 0; i < otherLists.length; i++) {
      otherLists[i].style.display = "none";
    }

    list.style.display = "block";
  } else {
    list.style.display = "none";
  }
}

修改说明 #

• 给.dropdown-container p设置margin:0，彻底清除默认上下外边距，解决打开前的空白问题。
• 将dropdown-list改为absolute定位并设置top:100%，让列表精准紧贴容器底部，消除打开后的顶部空隙。
• 给p和li标签添加可选padding，提升点击区域友好度，避免文字紧贴边缘。
• 修正列表链接颜色，确保在灰色背景下清晰可见。

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