Hover

Enables menu activation on mouse entry for fast-access navigation without clicking.

Down

<div class="btn-group me-2 dropdown-hover dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Down</button>
  <div class="dropdown-menu hover-menu">
    <li><a class="dropdown-item" href="#">Menu item 1</a></li>
    <li><a class="dropdown-item" href="#">Menu item 2</a></li>
    <li><a class="dropdown-item" href="#">Menu item 3</a></li>
  </div>
</div>

Up

<div class="btn-group me-2 dropdown-hover dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Up</button>
  <div class="dropdown-menu hover-menu">
    <li><a class="dropdown-item" href="#">Menu item 1</a></li>
    <li><a class="dropdown-item" href="#">Menu item 2</a></li>
    <li><a class="dropdown-item" href="#">Menu item 3</a></li>
  </div>
</div>

Left

<div class="btn-group me-2 dropdown-hover dropstart">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Left</button>
  <div class="dropdown-menu hover-menu">
    <li><a class="dropdown-item" href="#">Menu item 1</a></li>
    <li><a class="dropdown-item" href="#">Menu item 2</a></li>
    <li><a class="dropdown-item" href="#">Menu item 3</a></li>
  </div>
</div>

Right

<div class="btn-group me-2 dropdown-hover dropend">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Right</button>
  <div class="dropdown-menu hover-menu">
    <li><a class="dropdown-item" href="#">Menu item 1</a></li>
    <li><a class="dropdown-item" href="#">Menu item 2</a></li>
    <li><a class="dropdown-item" href="#">Menu item 3</a></li>
  </div>
</div>