hover导航项添加上内边距致全部项偏移，需实现下拉绘制式效果

希望实现li元素在hover时呈现下拉绘制的展开效果。当前hover某li元素时，所有导航项都会添加上内边距，而非仅被hover的项。期望效果：仅被hover的li元素添加上内边距，相对其他项向下“绘制”展开。补充：曾尝试使用translateY，但该属性仅移动元素，无法实现向下扩展的绘制效果。

问题根源在于ul的align-items: stretch和header的align-items: center，这两个属性会强制所有li的高度保持一致，当单个li增加内边距时，其他li会被同步拉伸，导致整体下移。要实现单个元素独立下拉展开，需要让每个li不受父元素的高度强制约束。

修改方案 #

• 给ul设置align-items: flex-start，取消高度强制拉伸，让每个li可以独立调整自身高度
• 给li设置默认min-height，保证未hover时所有导航项垂直对齐
• 将过渡动画放在li的初始状态，确保hover进出时都有平滑效果

修改后的代码 #

CSS

header {
  display: flex;
  justify-content: space-between;
  margin: 0 50px;
  align-items: center;
  border-top: 5px solid brown;
}

ul {
  display: flex;
  list-style-type: none;
  align-items: flex-start; /* 关键修改：取消高度强制拉伸 */
  gap: 20px;
  padding: 0; /* 移除ul默认内边距，优化布局 */
}

li {
  border: 0.5px solid black;
  border-width: 0 0.5px 0.5px;
  border-radius: 0 0 5px 5px;
  min-height: 40px; /* 设置默认最小高度，保证未hover时对齐 */
  transition: 0.2s; /* 过渡放在初始状态，保证进出动画生效 */
}

li:hover {
  padding-top: 100px;
}

a {
  color: #000;
  text-decoration: none;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 10px; /* 给链接增加内边距，优化点击区域 */
}

HTML

<header>
  <h2>Logo</h2>
  <div>
    <ul>
      <li>
        <a href="#">Link item</a>
      </li>
      <li>
        <a href="#">Link item</a>
      </li>
      <li>
        <a href="#">Link item</a>
      </li>
    </ul>
  </div>
</header>

进阶伪元素实现（更自然的绘制感） #

如果想要避免padding-top导致链接内容上移，可以用::after伪元素实现下拉扩展，保持链接位置不变：

li {
  position: relative;
  border: 0.5px solid black;
  border-width: 0 0.5px 0.5px;
  border-radius: 0 0 5px 5px;
  min-height: 40px;
  overflow: hidden;
}

li::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  background-color: #fff; /* 与页面背景色一致，避免遮挡 */
  transition: height 0.2s;
}

li:hover::after {
  height: 100px; /* 下拉展开的高度 */
}

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