這是我的HTML代碼。這只是一個帶有下拉菜單的基本導航條菜單。

/* Navbar */

.navbar {
  display: flex;
  position: fixed;
  width: 100%;
  background: var(--secondary-color);
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.navbar .nav-links li {
  display: inline-block;
}

.navbar .nav-links li .nav-link {
  color: var(--primary-color);
  text-transform: uppercase;
  padding: 16px 22px;
}

.navbar .nav-links li .nav-link:hover {
  background: var(--tertiary-color);
  color: var(--secondary-color);
}

.navbar .nav-links .dropdown {
  position: relative;
}

.fa-magnifying-glass {
  color: var(--primary-color);
  padding: 16px 22px;
}

.fa-magnifying-glass:hover {
  background: var(--accent-color);
  cursor: pointer;
}

.dropdown-links li {
  padding: 8px 22px;
  width: 100%;
}

.dropdown-links li .dropdown-link {
  color: var(--secondary-color);
  padding: 8px auto;
  display: block;
}

.dropdown-links {
  display: none;
  position: absolute;
  background: var(--primary-color);
  width: 140px;
  top: 47px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.dropdown-links li:hover {
  background: var(--tertiary-color);
  cursor: pointer;
}

.dropdown-link:hover .dropdown {
  background-color: var(--tertiary-color);
}


/* need to fix this issue */

.dropdown:hover+.dropdown-links,
.dropdown-links:hover {
  display: block;
}

<header>
  <nav class="navbar">
    <ul class="nav-links">
      <li><a href="#" class="nav-link">Home</a></li>
      <li><a href="#" class="nav-link">Band</a></li>
      <li><a href="#" class="nav-link">Tour</a></li>
      <li><a href="#" class="nav-link">Contact</a></li>
      <li>
        <a class="nav-link dropdown" href="#">More <i class="fa-solid fa-caret-down"></i
            ></a>

        <ul class="dropdown-links">
          <li><a class="dropdown-link" href="#">Merchandise</a></li>
          <li><a class="dropdown-link" href="#">Extra</a></li>
          <li><a class="dropdown-link" href="#">Media</a></li>
        </ul>
      </li>
    </ul>
    <i class="fa-solid fa-magnifying-glass fa-l"></i>
  </nav>