adding padding top to the nav item on hover offsets all the nav items. Trying to achieve a draw- like effect

Question

li items extending, even though they should not

What I am trying to achieve is having my li element kind of draw itself out on hover.

The current behavior when I hover over a li element is - all the elements get the padding instead of just the one I am hovering.

The expected behavior is - the hovered element( and only the hovered element) gets the padding top value and is "drawn" downwards in regards to the others

EDIT: I also attempted using the translateY, but the issue with this is that it moves my element, instead of extending it to the bottom, which is not achieving the "drawing out" effect I am trying to implement.

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: stretch;
  gap: 20px;
}

li {
  border: 0.5px solid black;
  border-width: 0 0.5px 0.5px;
  border-radius: 0 0 5px 5px;
}

li:hover {
  padding-top: 100px;
  transition: 0.2s;
}

a {
  color: #000;
  text-decoration: none;
  height: 100%;
  display: flex;
  align-items: center;
}

<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>

Answer 1

In order to achieve this you need to set a height to li (here fit-content) like this it won't expand when flex header is expending. I also removed align-items: center in header like this the h2 won't change position when hovering over li

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

ul {
  display: flex;
  list-style-type: none;
  align-items: stretch;
  gap: 20px;
}

li {
  border: 0.5px solid black;
  border-width: 0 0.5px 0.5px;
  border-radius: 0 0 5px 5px;
  height:fit-content;
}

li a:hover {
  padding-top: 100px;
  transition: 0.2s;
}

a {
  color: #000;
  text-decoration: none;
  height: 100%;
  display: flex;
  align-items: center;
}

<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>