html - 如何使导航栏上的单个元素拉伸(stretch)？

Question

在我的导航栏中，我只想将鼠标悬停在元素上以拉伸(stretch)并改变颜色，但似乎整个导航栏都在拉伸(stretch)。我试过更改必须悬停的内容才能触发动画，但似乎没有任何效果。你能找出并纠正我的错误吗？

@keyframes mouse {
  0% {
    background-color: #35B1C2;
    height: 40px
  }
  100% {
    background-color: #2F9EBD;
    height: 60px
  }
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #35B1C2;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li:hover {
  animation-fill-mode: forwards;
  animation-duration: 0.5s;
  animation-name: mouse;
}

li {
  border-right: 1px solid #bbb;
}

li:last-child {
  border-right: none;
}

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="aboutme.html">About Me</a></li>
  <li><a href="projects.html">Projects</a></li>
</ul>

Answer 1

您可以删除 overflow:hidden 并添加

overflow:visible;
height:45px; /* The height of your navbar */

到您的 ul 元素。