Dropdown on hover

Bootstrap 5 Dropdown on hover component

Responsive Dropdown on hover built with Bootstrap 5. Example of how to make dropdown expand when you hover over it.

Basic example

Add CSS that makes the dropdown-menu expand when hovering over a dropdown element.

Edit in sandbox 
        
            
      <div class="dropdown">
        <button data-mdb-button-init
          data-mdb-ripple-init data-mdb-dropdown-init class="btn btn-primary dropdown-toggle"
          type="button"
          id="dropdownMenuButton"
          data-mdb-toggle="dropdown"
          aria-expanded="false"
        >
          Dropdown button
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </div>
      
        
    
        
            
      .dropdown:hover>.dropdown-menu {
        display: block;
      }
      
      .dropdown>.dropdown-toggle:active {
        /*Without this, clicking will make it sticky*/
          pointer-events: none;
      }
24H 00M 00S

Get one of the limited daily offers for AI Bundles with 98% OFF for our Black Days Sale!