Bootstrap on hover button dropdown menu

Question

I want dropdown-menu to appear on mouse hover. Here is jsbin of my code: link

Tried jquery:

$('.dropdown-toggle').hover(
    function() {
        $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
    }
);
$('.dropdown-menu').hover(
    function() {
        $(this).stop(true, true);
    },
    function() {
        $(this).stop(true, true).delay(200).fadeOut();
    }
);

But it is not working...

Answer 1

In Bootstrap Dropdown with Hover this is fixed using CSS instead of JavaScript. If you change the solution of the accepted answer into

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

it should work with your example code.

Answer 2

You can use inner Bootstrap API:

$(document)
   .on('hover', '.dropdown-toggle', Dropdown.prototype.toggle)

Answer 3

Try this

jQuery(function ($) {
    $('.navbar .dropdown').hover(function () {
        $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
    }, function () {
        $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
    });
    $('.navbar .dropdown > a').click(function () {
        location.href = this.href;
    });
});