Dropdown hover

Bootstrap 5 Dropdown hover component

Responsive Dropdown 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;
      }