当我在链接周围悬停时，我希望列表项的白色背景接触导航栏的顶部和底部

<nav class="navbar">
  <ul class="nav-list">
    <li><a href="#">链接1</a></li>
    <li><a href="#">链接2</a></li>
    <li><a href="#">链接3</a></li>
  </ul>
</nav>

.navbar {
  background-color: #f2f2f2;
  padding: 10px;
}

.nav-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.nav-list li {
  display: inline-block;
}

.nav-list li a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
}

.nav-list li a:hover {
  background-color: #fff;
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
}