Dropdown on hover

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

Check out Bootstrap Dropdown on hover Documentation for detailed instructions & even more examples.

Basic example

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

<div class="dropdown">
  <button
    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;
}

How to use?

1. Download MDB - free UI KIT

2. Choose your favorite customized component and click on the image

3. Copy & paste the code into your MDB project

▶️ Subscribe to the YouTube channel for web development tutorials & resources

More extended Bootstrap documentation