有没有办法阻止我的下拉菜单将所有其他 li 元素向上移动？

Question

我在我的网页的导航部分有水平 li 元素，其中一个 li 元素有一个下拉菜单，将鼠标悬停在它上面时，所有 li 元素都会被抬起并且下拉菜单居中。 我怎样才能让它在带有下拉菜单的 li 上悬停时保持静止？几个小时以来，我一直在努力解决这个问题，但我一无所知。

  .navbar {
  background: (var(--primary-color));
  padding: 1em 2em 4em 2em;
  height: 5em;
  .logo img {
    width: 15em;
  }
  nav {
    display: none;
  }
  .container {
    display: flex;
    place-content: space-between;
  }
  .mobile-menu {
    cursor: pointer;
  }
  .dropdown-content {
    display: none;
    background-color: white;
    width: auto;
    z-index: 999;
    position: inherit;
  }
  .dropdown-content a {
    color: var(--secondary-color);
    padding: 12px 12px;
    text-decoration: none;
    text-align: center;
  }
  .dropdown:hover .dropdown-content {
    display: block;
  }
  .dropdown-content a:hover {
    background-color: #f1f1f1
  }
}

@media screen and (min-width: 812px) {
  .mobile-menu,
  .mobile-menu-exit {
    display: none;
  }
  .navbar .container {
    display: grid;
    grid-template-columns: 180px auto;
  }
  .navbar nav {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    position: unset;
    height: auto;
    width: 100%;
    padding: 0;
    ul {
      display: flex;
      li {
        width: 150px;
        a {
          color: var(--secondary-color);
          font-size: 1em;
          text-align: center;
        }
      }
    }
  }

<nav>
  <div class="nav">
    <img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="close menu">
    <ul class="primary">

      <li class="current"><a href="#">HOME</a></li>
      <li class="dropdown"><a href="#anchor2">PORTFOLIO</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
      <li><a href="#anchor1">lorem</a></li>
      <li><a href="#anchor3">ipsum</a></li>

    </ul>
  </div>
</nav>