导航菜单Hover下拉列表时如何固定主列表项的边框长度？

问题根源 #

你遇到的问题出在hover下拉项时，把子菜单的position从absolute改成了relative——这会让父列表项（#dropdown-1）的高度被下拉菜单撑开。而主菜单是flex布局，默认align-items: stretch，会让所有同级列表项被拉伸到和最高的项一样高，导致边框看起来变长。

修复方案 #

调整下拉菜单的定位逻辑，保持绝对定位不改变，同时确保主菜单列表项高度不会被拉伸：

修改后的CSS代码

ul.menu {
  background-color: #2980b9;
  display: flex;
  padding: 10px;
  align-items: flex-start; /* 让所有主列表项高度由自身内容决定，避免被拉伸 */
}

ul.menu > li {
  margin: 10px;
  padding: 10px;
  border: 1px solid aliceblue;
  border-radius: 10px;
  display: inline-block;
  position: relative; /* 给父元素设置相对定位，让子菜单的绝对定位基于它 */
}

#dropdown-1 > ul{
  visibility: hidden;
  opacity: 0;
  position: absolute; /* 保持绝对定位，不撑开父元素高度 */
  top: 100%; /* 定位到父元素底部 */
  left: 0;
  margin: 0;
  padding: 0;
  background-color: #2980b9;
  border-radius: 0 0 10px 10px;
  transition: .25s all;
}

#dropdown-1:hover > ul {
  visibility: visible;
  opacity: 1;
  /* 无需修改position，保持absolute即可 */
}

/* 可选：优化下拉子项样式，避免继承父元素的边距 */
#dropdown-1 > ul > li {
  margin: 0;
  padding: 10px;
  border: none;
  border-bottom: 1px solid aliceblue;
  border-radius: 0;
  white-space: nowrap; /* 防止子项换行 */
}

#dropdown-1 > ul > li:last-child {
  border-bottom: none;
  border-radius: 0 0 10px 10px;
}

HTML代码（保持原结构即可）

<header>
  <ul class="menu">
    <li>
      <a href="#">Home</a>
    </li>
    <li id="dropdown-1">
      <a href="#">Branchs</a>
      <ul>
        <li>
          <a href="#">branch 1</a>
        </li>
        <li id="dropdown-2">
          <a href="#">branch 2</a>
          <ul>
            <li>
              <a href="#">sss</a>
            </li>
            <li>
              <a href="#">sss</a>
            </li>
            <li>
              <a href="#">sss</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">branch 3</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">About Us</a>
    </li>
  </ul>
</header>

关键改动说明 #

1. ul.menu添加align-items: flex-start：强制所有主列表项高度由自身内容决定，不会被flex布局强制拉伸。
2. ul.menu > li添加position: relative：让下拉菜单的绝对定位基于父元素，确保下拉菜单显示在父项正下方。
3. 下拉菜单保持position: absolute：避免撑开父元素高度，同时通过top:100%固定位置。
4. 移除hover时修改position和height的代码：仅保留visibility和opacity的过渡效果，保证下拉动画正常。

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