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