html - 将鼠标悬停在下拉元素上时，导航栏元素会轻微移动

Question

下面是我制作的简单导航栏的 html 代码。我的问题是，当我将鼠标悬停在产品链接上以显示下拉元素时，所有其他导航栏元素都会向左移动。我意识到我可能会以错误的方式解决这个问题，因为我还在学习。

.main-nav {
  border: 1px solid blue;
  text-align: center;
  display: block;
  position: absolute;
  width: 100%;
}

.main-nav li {
  display: inline-block;
  margin-right: 20px;
  border: 1px solid orange;
}

.main-nav ul {
  list-style: none;
  display: block;
  grid-gap: 10px;
}

.products li {
  display: block;
  border: 1px solid black;
}

.products-list a {
  border: 1px solid purple;
  height: auto;
  display: block;
  margin-top: 20px;
}

.products a {
  display: none;
}

.products {
  position: absolute;
}

.products-list:hover .products a {
  display: block;
}

<div class="wrapper">
  <nav class="main-nav">
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li class="products-list"><a href="#">PRODUCTS</a>
        <ul class="products">
          <li><a href="#">item1</a></li>
          <li><a href="#">item2</a></li>
          <li><a href="#">item3</a></li>
          <li><a href="#">item4</a></li>
        </ul>
      </li>
      <li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">CONTACT</a></li>

    </ul>
  </nav>

  <!--   wrapper ends   -->
</div>

注意:我为某些元素提供了边框以帮助我定位它们。

Answer 1

你在 service 之前添加了额外的 li

.main-nav {
  border: 1px solid blue;
  text-align: center;
  display: block;
  position: absolute;
  width: 100%;
}

.main-nav li {
  display: inline-block;
  margin-right: 20px;
  border: 1px solid orange;
}

.main-nav ul {
  list-style: none;
  display: block;
  grid-gap: 10px;
}

.products li {
  display: block;
  border: 1px solid black;
}

.products-list a {
  border: 1px solid purple;
  height: auto;
  display: block;
  margin-top: 20px;
}

.products a {
  display: none;
}

.products {
  position: absolute;
}

.products-list:hover .products a {
  display: block;
}

<div class="wrapper">
  <nav class="main-nav">
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li class="products-list"><a href="#">PRODUCTS</a>
        <ul class="products">
          <li><a href="#">item1</a></li>
          <li><a href="#">item2</a></li>
          <li><a href="#">item3</a></li>
          <li><a href="#">item4</a></li>
        </ul>
      </li>
      <li><a href="#">SERVICES</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
  <div>