I have implemented a Bootstrap nav bar on my homepage that has some dropdown elements.
When I open the dropdown menu the :hover/:focus background-color overlaps the dropdown div.

HTML:

<nav class="navbar navbar-expand-lg navbar-light fixed-top">
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
    aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink1" data-bs-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
          Haus
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink1">
          <a class="dropdown-item" href="{% url 'ferienwohnung-oben' %}">Obere Ferienwohnung</a>
          <a class="dropdown-item" href="{% url 'ferienwohnung-unten' %}">Untere Ferienwohnung</a>
          <a class="dropdown-item" href="{% url 'haus' %}">Gesamtes Haus</a>
          <a class="dropdown-item" href="{% url 'hausregeln' %}">Hausregeln</a>
          <a class="dropdown-item" href="{% url 'anfahrt' %}">Anfahrt</a>
        </div>
      </li>
      </li>
    </ul>
  </div>
</nav>

CSS:

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #cbc0d3;
  font-weight: bold;
}

I have tried different overflow-x properties but none of them worked, and have not found a proper match of the issue here on Stack Overflow. Can anybody help out?