How to make Bootstrap's dropdown on hover?

1.Hide dropdown-menu on mouseover.

$(document).ready(function() {
    $('.nav li.dropdown').hover(function() {
        $(this).addClass('open');
    }, function() {
        $(this).removeClass('open');
    });
});

2.Hide dropdown-menu on click.

$(document).ready(function() {
    $('.nav li.dropdown').hover(function() {
        $(this).addClass('open');
    });
});

http://jsfiddle.net/7yMsQ/1/


heres a function I'm using to get the navbar dropdowns to slide down on hover instead of just popping in

$('.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()
});

While How to make twitter bootstrap menu dropdown on hover rather than click has been upvoted a lot, with the newer versions of Bootstrap, no need to hack at it.

http://cameronspear.com/blog/twitter-bootstrap-dropdown-on-hover-plugin/ is a replacement for the existing dropdown.js, and lets you enable on hover. No CSS modifications required.