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