How to open dropdown on hover in bootstrap 4

user_7918189 0
Viewed 18272

Right now my navigation drop down can open on click.

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

bootstrap-4 css html
6 Answers

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>

user_38409290

Below css works fine

.dropdown:hover>.dropdown-menu {
    display: block;
}
.dropdown>.dropdown-toggle:active {
    pointer-events: none;   // Add this, to prevent clicking dropdown's default click function
}
user_38663640 
<div class="dropdown">
...
</div>

You could try this with jQuery:

$(".dropdown").hover(function(){
$(this).addClass("show");
});
user_87319480

I got this solution using Angular with ng-bootstrap and bootstratp:

CSS:

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

HTML:

      <li class="nav-item dropdown" ngbDropdown>
        <a class="nav-link h5 dropdown-toggle" id="navbarDropdown" ngbDropdownToggle>
          Parent</a>
          <div ngbDropdownMenu class="dropdown-menu">
            <a class="dropdown-item" href="#" ngbDropdownItem>Child1</a>
            <a class="dropdown-item" href="#" ngbDropdownItem>Child2</a>
          </div>
      </li>

So, if don't use the CSS property, the dropdown will happens only when click on parent link.

user_28289060

While I appreciate the answers to this question, the answers given are seemingly not the best. This is because these answers are disregarding accessibility.

Notice that, when using only CSS to make the dropdown show on .nav-link hover, the aria-expanded parameter on the .nav-link element does not change to true.

You must use some JS then in order to have the full range of accessibility functionality.

Below is what I have come up with to combat this.

// header_scripts.js

$('body').on('hover', '.nav-item.dropdown', function() {
    $(this).find('.dropdown-toggle').dropdown('toggle');
});


/* header.css */

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

The above code should provide the same functionality that you are seeing in the other answers to this question, but with full accessibility concerns.

The CSS I gave is very general and has pretty low specificity so work with that as you see fit.

user_68848000
Related