Navbar dropdown hover

If this is what the dropdown looks like

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu" aria-labelledby="dropdown01">
        <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>

  Then add the following to the style rules

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

PS: Have I ever told you that I have an adversity to hover events?

No reason why you cant have a 'hover' effect for desktop devices. Hover wont work on mobile devices though so you need to keep the default onclick event.

If you want to implement the drop down on hover and you are using Bootstrap 4 then you need to write a bit of extra javascript. Below is just something I put together which will do the job (assuming youre using the default Bootstrap 4 html structure). Someone who actually uses Bootstrap (I personally don't) may have a better more streamlined solution. I have no doubt there are few ways you can do this.

The below script needs to be located at the bottom of your page just before the closing </body> tag.

 <script>
// get all the dropdown-toggle anchor links and assign them to a variable - dropdownToggle
const dropdownToggle = document.querySelectorAll('.dropdown-toggle');
// get all the dropdown-menu divs and assign them to a variable - dropdownMenu
const dropdownMenu = document.querySelectorAll('.dropdown-menu');
// loop through each dropdown-toggle anchor and display the next dropdown-menu div whilst adding display none to the others
dropdownToggle.forEach(function(dropdown) {
dropdown.onmouseover = function() {
dropdownMenu.forEach(function(dropdownMenu) {
dropdownMenu.style.display = "none";	
})
this.nextElementSibling.style.display = "block";
}
});
// loop though all the dropdown-menu divs and apply an onmouseleave event to hide the current active div
dropdownMenu.forEach(function(dropdownMenu) {
dropdownMenu.onmouseleave = function() {
this.style.display = "none";
}
})
</script>