CODEWITHSUNDEEP
twitter-bootstrap
xpath
xpath

Reputation: 49

how to fix this in bootstrap 5 nav bar dropdown stays open with click and mouse over

I am using Bootstrap 5 and enabled dropdown on click and hover.

.dropdown:hover .dropdown-menu{
        display: block;
        border-style:none;
        }

The problem is after I click on the top level dropdown item (that displays the dropdown items) and when I mouse over to next item the previous dropdown window stays open. How can I avoid this?

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
      
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Link</a></li>
            <li><a class="dropdown-item" href="#">Another link</a></li>
            <li><a class="dropdown-item" href="#">A third link</a></li>
          </ul>
        </li>
        
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown1</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Link</a></li>
            <li><a class="dropdown-item" href="#">Another link</a></li>
            <li><a class="dropdown-item" href="#">A third link</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

how can I fix this issue?

Upvotes: 1

Views: 1780

Answers (1)

Coding Yaar
Coding Yaar

Reputation: 114

Since it opens on mouse over, you don't need it on click. Remove data-bs-toggle="dropdown" from the dropdown and it should work fine.

Upvotes: 2

Related Questions