How to open dropdown on hover in bootstrap 4

Question

Right now my navigation drop down can open on click.

I want it to open upon hover. How do I do this?

Answer 1

simply add following css

.dropdown:hover>.dropdown-menu {
 display: block;
}

fiddle

.dropdown:hover>.dropdown-menu {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
   <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
 
<ul class="navbar-nav">

  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown link
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </li>
</ul>
</nav>

Answer 2

The css from Znaneswar works great but I would add this line as well.

.dropdown-menu {
  margin: -0.125rem 0 0;
}

The dropdown is spaced 0.125rem away from the element that spawns the dropdown. So you'll have a hard time navigating from the link to the dropdown without it disappearing when you mouse over that gap.

And if you want the dropdown link to actually be a link as well, just remove this attribute from the a tag

data-toggle="dropdown"