Just Add this simple css code in your style-sheet and you are ready to go.

.dropdown:hover > .dropdown-menu {

    display: block;

}

.dropdown > .dropdown-toggle:active {

    /*Without this, clicking will make it sticky*/

    pointer-events: none;

}

Bootstrap's functionality appears to have changed slightly since v4 has been released. The .dropdown-menu item appears to also now get the .show class in addition to the .dropdown. I adapted Andrei's answer to also toggle the class on the .dropdown-menu. Note that the CSS is no longer necessary and the HTML is the same except I updated the links to the current versions and the nav class changed to navbar-expand-md.

$('body').on('mouseenter mouseleave', '.dropdown', function (e) {

    var dropdown = $(e.target).closest('.dropdown');

    var menu = $('.dropdown-menu', dropdown);

    dropdown.addClass('show');

    menu.addClass('show');

    setTimeout(function () {

        dropdown[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');

        menu[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');

    }, 300);

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md navbar-light bg-faded">

  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarNavDropdown">

    <ul class="navbar-nav">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Features</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Pricing</a>

      </li>

      <li class="nav-item dropdown">

        <a class="nav-link dropdown-toggle" href="http://example.com" 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>

  </div>

</nav>

Andrei's "complete" jQuery+CSS solution has the right intent, but it's verbose and still incomplete. Incomplete because while it probably covers all the necessary DOM changes, it's missing the firing of custom events. Verbose because it's wheel-reinventing when Bootstrap already provides the dropdown() method, which does everything.

So the correct, DRY solution, which does not rely on the CSS hack often repeated among other answers, is just jQuery:

$('body').on('mouseover mouseout', '.dropdown', function(e) {

    $(e.target).dropdown('toggle');

});

I had already used and styled a navbar when I was requested to change it to a hover interaction instead, so ended up with this as a fix using jQuery.

function bootstrapHoverMenu (bp = 768) {



  // close all dropdowns that are open

    $('body').click( function (e) {

    $('.dropdown-menu.show').removeClass('show');

  });



  // show dropdown for the link clicked

  $('.nav-item').hover(function (e) {

    $('.dropdown-menu.show').removeClass('show');

    if(( $(window).width() >= bp )) {

      $dd = $(this).find('.dropdown-menu');

      $dd.addClass('show');

    }

  });



  // get href for top level link if clicked and open

  $('.dropdown').click(function (e) {

    if( $(window).width() < bp ) {

      $('.dropdown-menu').css({'display': 'none'});

    }

    $href = $(this).find('.nav-link').attr('href');

    window.open($href, '_self');

  });

}



$(document).ready( function() {

   // when page ready run the fix

   bootstrapHoverMenu();

});

Downside is mobile only has top level links.

Bootstrap v4 Solution - jQuery based, but better than a pure css solution

This ensures that you can still follow top level link clicks and is
compatible with mobile.

This was built with desktop and mobile in mind. Fell free to wrap the jQuery with a conditional that checks if the window width is greater than 768px.

jQuery

/** Dropdown on hover */

$(".nav-link.dropdown-toggle").hover( function () {

    // Open up the dropdown

    $(this).removeAttr('data-toggle'); // remove the data-toggle attribute so we can click and follow link

    $(this).parent().addClass('show'); // add the class show to the li parent

    $(this).next().addClass('show'); // add the class show to the dropdown div sibling

}, function () {

    // on mouseout check to see if hovering over the dropdown or the link still

    var isDropdownHovered = $(this).next().filter(":hover").length; // check the dropdown for hover - returns true of false

    var isThisHovered = $(this).filter(":hover").length;  // check the top level item for hover

    if(isDropdownHovered || isThisHovered) {

        // still hovering over the link or the dropdown

    } else {

        // no longer hovering over either - lets remove the 'show' classes

        $(this).attr('data-toggle', 'dropdown'); // put back the data-toggle attr

        $(this).parent().removeClass('show');

        $(this).next().removeClass('show');

    }

});

// Check the dropdown on hover

$(".dropdown-menu").hover( function () {

}, function() {

    var isDropdownHovered = $(this).prev().filter(":hover").length; // check the dropdown for hover - returns true of false

    var isThisHovered= $(this).filter(":hover").length;  // check the top level item for hover

    if(isDropdownHovered || isThisHovered) {

        // do nothing - hovering over the dropdown of the top level link

    } else {

        // get rid of the classes showing it

        $(this).parent().removeClass('show');

        $(this).removeClass('show');

    }

});

CSS

@media(min-width:  768px) {

  .dropdown-menu {

    margin-top: 0; // fixes closing on slow mouse transition

  }

}

I think this simply just work with bootstrap 4, i adding in inline but you always can bind event from script.

  <a 

onmouseover="$('#navbarDropdownMenuLink').dropdown('toggle')"

class="nav-link dropdown-toggle" 

href="http://example.com" 

id="navbarDropdownMenuLink" 

data-toggle="dropdown" 

aria-haspopup="true" 

aria-expanded="false">

      Dropdown link

    </a>

Bootstrap 4 CSS-only

None of the CSS only answers work entirely. Either the dropdown menu stays open after click, or there is a gap that makes the dropdown menu hide before you can reach the menu links to click.

Here's the simple CSS only solution:

.navbar-nav li:hover .dropdown-menu {

    display: block;

}

Remove data-toggle=dropdown from the HTML markup to prevent the dropdown staying open in click. Use mt-0 (margin-top:0) to eliminate the gap above the menu, and make it possible to hover the menu items.

Demo https://www.codeply.com/go/awyU7VTIJf

Complete Code:

   .navbar-nav li:hover .dropdown-menu {

        display: block;

    } 



   <nav class="navbar navbar-expand-lg navbar-light bg-light">

      ..

      <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <ul class="navbar-nav mr-auto">

          <li class="nav-item dropdown">

            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown">

              Dropdown

            </a>

            <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">

              <a class="dropdown-item" href="#">Action</a>

              <a class="dropdown-item" href="#">Another action</a>

              <div class="dropdown-divider"></div>

              <a class="dropdown-item" href="#">Something else here</a>

            </div>

          </li>

        </ul>

      </div>

    </nav>   

<div style="width: 100%; overflow: scroll;"><table class="table table-striped table-bordered" style="font-size:12px">

This solution switches on and off

<script>

$(document).ready(function() {

  // close all dropdowns that are open

  $('body').click(function(e) {

      $('.nav-item.show').removeClass('show');

      //$('.nav-item.clicked').removeClass('clicked');

      $('.dropdown-menu.show').removeClass('show');

  });



  $('.nav-item').click( function(e) {

    $(this).addClass('clicked')

  });



  // show dropdown for the link clicked

  $('.nav-item').hover(function(e) {

      if ($('.nav-item.show').length < 1) {

        $('.nav-item.clicked').removeClass('clicked');

      }

      if ($('.nav-item.clicked').length < 1) {

          $('.nav-item.show').removeClass('show');

          $('.dropdown-menu.show').removeClass('show');

          $dd = $(this).find('.dropdown-menu');

          $dd.parent().addClass('show');

          $dd.addClass('show');

      }

  });

});</script>

To disable the hover for lg sized collapse menus add

if(( $(window).width() >= 992 )) {

CSS solutions not working properly on touch device

I found that any CSS solutions made the menu stay open on touch devices, they didn't collapse anymore.


So I read the article: https://www.brianshim.com/webtricks/drop-down-menus-on-ios-and-android/ (by Brian Shim)

Very useful! It states that a touch device always first checks the existence of a hover class on an element.


But: by using jQuery .show() you introduce a style attribute (display:block;) that makes the menu open up on first touch. Now the menu has opened without the bootstrap 'show' class. If a user chooses a link from the dropdown menu it works perfectly. But if a user decides to close the menu without using it he has to tap twice to close the menu: At the first tap the original bootstrap 'show' class gets attached so the menu opens up again, at the second tap the menu closes due to normal bootstrap behaviour (removal of 'show' class).

To prevent this I used the article: https://codeburst.io/the-only-way-to-detect-touch-with-javascript-7791a3346685 (by David Gilbertson)

He has some very handy ways of detecting touch or hover devices.

So, combined the two authors with a bit jQuery of my own:

$(window).one('mouseover', function(){

      window.USER_CAN_HOVER = true;

      if(USER_CAN_HOVER){

          jQuery('#navbarNavDropdown ul li.dropdown').on("mouseover", function() {

             var $parent = jQuery(this);

             var $dropdown = $parent.children('ul');



             $dropdown.show(200,function() { 

               $parent.mouseleave(function() {

                 var $this = jQuery(this);

                 $this.children('ul').fadeOut(200);

               });

             });

          });

      };

});
Check once if a device allows a hover event. If it does, introduce the possibility to hover using .show(). If the device doesn't allow a hover event, the .show() never gets introduced so you get natural bootstrap behaviour on touch device.

Be sure to remove any CSS regarding menu hover classes.

Took me three days :) so I hope it helps some of you.

I use bootstrap 4.0.0
since we want to simulate .show to hover event, it simply easy. just add all styles in .dropdown.show .dropdown-menu to the :hover. like this:

.dropdown:hover>.dropdown-menu {

  opacity: 1;

  visibility: visible;

  transform: translate3d(0px, 0px, 0px);

}