How to open dropdown on hover in bootstrap 4 - html

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"

Answer 3

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
}

Answer 4

<div class="dropdown">
...
</div>
You could try this with jQuery:
$(".dropdown").hover(function(){
$(this).addClass("show");
});

Answer 5

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.

Answer 6

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.