How do I stop list-items getting squashed whenever I hover over them?-CodePudding

I want to create a menu, where if you hover over an <a> it slides down by 10px, and if you unhover it slides back up 10px.

The problem is whenever you hover over an <a> the parent container (<li>) gets squashed to 0px width.

.nav-list {
  display: flex;
  gap: 1rem;
  list-style: none;
  justify-content: flex-end;
  background-color: #495371;
  padding: 20px 20px 30px 20px;
}

.nav-list>li {
  border: 1px yellow solid;
}

.nav-list a:link,
a:visited,
a:active {
  color: #FFF;
  text-decoration: none;
  border: 1px red solid;
  font-size: 30px;
  font-weight: bold;
}

.nav-list a:hover {
  color: #000;
  position: absolute;
  padding-top: 10px;
}

<header>
  <nav>
    <ul >
      <li><a href="#">Stuff1</a></li>
      <li><a href="#">Stuff22</a></li>
      <li><a href="#">Stuff333</a></li>
    </ul>
  </nav>
</header>
<p>yellow: ul<br>red: a</p>

JSFiddle Link

CodePudding user response：

Instead of position: absolute; for hover effect, you'd need to use transform: translateY();. Also, because a is inherently inline element, you'd need to add the transform to its block-level parent of li.

Please see the snippet below. Very minimal change has been made to your .nav-list li and its a styles.

.nav-list {
  display: flex;
  gap: 1rem;
  list-style: none;
  justify-content: flex-end;
  background-color: #495371;
  padding: 20px 20px 30px 20px;
}

.nav-list>li {
  border: 1px yellow solid;
  transition: transform .2s;
}

.nav-list a:link,
a:visited,
a:active {
  color: #FFF;
  text-decoration: none;
  border: 1px red solid;
  font-size: 30px;
  font-weight: bold;
}

.nav-list li:hover {
  transform: translateY(10px);
}
.nav-list a:hover {
  color: #000;
}

<header>
  <nav>
    <ul >
      <li><a href="#">Stuff1</a></li>
      <li><a href="#">Stuff22</a></li>
      <li><a href="#">Stuff333</a></li>
    </ul>
  </nav>
</header>
<p>yellow: ul<br>red: a</p>

CodePudding user response：

What you want is position: relative; and top: 10px; on your hover instead of position absolute and padding-top. This will push your element down. Note that the yellow box will not go down with it if you have it set to the anchor tag's hover. Instead have it attach the the li tag's hover event if you want both to move that direction.

.nav-list {
  display: flex;
  gap: 1rem;
  list-style: none;
  justify-content: flex-end;
  background-color: #495371;
  padding: 20px 20px 30px 20px;
}

.nav-list>li {
  border: 1px yellow solid;
}

.nav-list a:link,
a:visited,
a:active {
  color: #FFF;
  text-decoration: none;
  border: 1px red solid;
  font-size: 30px;
  font-weight: bold;
}

.nav-list a:hover {
  color: #000;
  position: relative;
  top: 10px;
}

<header>
  <nav>
    <ul >
      <li><a href="#">Stuff1</a></li>
      <li><a href="#">Stuff22</a></li>
      <li><a href="#">Stuff333</a></li>
    </ul>
  </nav>
</header>
<p>yellow: ul<br>red: a</p>