如何让导航栏下拉菜单统一显示在导航栏下方的同一高度位置

问题根源 #

1. 绝对定位的下拉菜单没有相对于统一高度的父容器定位
2. 导航项默认没有撑满整个导航栏高度，下拉菜单的位置是跟着内部按钮高度走的
3. 未指定下拉菜单的顶部偏移基准

解决方案 #

你只需要修改以下几处CSS即可实现所有下拉菜单统一对齐到导航栏底部：

/* 新增/修改以下样式 */
.header_element {
  padding: 5px;
  margin-right: 5px;
  position: relative; /* 让下拉菜单相对于当前导航项定位 */
  display: flex;
  align-items: center; /* 导航项内容垂直居中，避免文字换行导致的排版错位 */
}

/* 去掉p标签默认边距，避免产生额外高度 */
.header_button {
  margin: 0;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%; /* 下拉菜单顶部刚好对齐父导航项的底部，也就是导航栏的底部 */
  left: 0; /* 对齐父导航项的左侧，可根据实际需求调整偏移值 */
  padding: 10px;
  margin-top: 0px;
  background-color: var(--accent_1);
  text-decoration: none;
  list-style-type: none;
  z-index: 1;
}

补充说明 #

• 导航栏本身是flex布局，子项默认会拉伸到和容器相同高度，所以每个.header_element的高度都和导航栏高度一致，设置top:100%后所有下拉菜单的起始位置自然统一在导航栏底部
• 如果你需要下拉菜单宽度和对应导航项一致，可以额外给.dropdown添加width: 100%属性

内容的提问来源于stack exchange，提问作者s-cat-z