Please report any bugs on GitHub, as it's easier to manage than bugs reported in the comments here.

[Update: 31 March 2013] I have a new way of editing posts, so I can import the actual code now for the plugin, making it easier to update, so I'll keep the code on this page.

[Update: 16 March 2013] It's tough to keep the code in this post updated automagically, so I am removing the code from the post. Please visit GitHub for the source code. The download and demo links on these pages link directly to a copy of exactly what's in GitHub, so I'll keep those here for convenience (some people are still intimidated by GitHub).

[Update: 17 Oct 2012] I added some features to the plugin and added the details on this post (as well as the new code). I also put the code on GitHub, scroll down for the link.

There is a lot of discussion about the Twitter Bootstrap dropdowns and the fact that they do not activate on hover. I've read some reasons against hover, and even some from one of the creates of Bootstrap, and they are good points.

Sometimes though, I do like a good hover. So I wrote a plugin that you can use that gives a nice hover with a close-after-delay effect. You can optionally choose to close all other navs as soon as you hover over the next, and you can also set the delay time (500ms by default).

The delay is nice, because it doesn't punish users for moving their mouse 1px outside the dropdown (which would close it without the delay). There is also a small space between the button and the dropdown, where without the delay, it would close if your mouse went over it, so the delay helps with that, too.

This won't affect your mobile users. As a matter of fact, I think it enhanced the experience I had on my iPad a little bit. Without this plugin, once I opened a nav, I couldn't close it, but once I open another nav, it at least closes the last one I opened.

Alright, enough talking... the code:

/*
 * Project: Twitter Bootstrap Hover Dropdown
 * Author: Cameron Spear
 * Contributors: Mattia Larentis
 *
 * Dependencies?: Twitter Bootstrap's Dropdown plugin
 *
 * A simple plugin to enable twitter bootstrap dropdowns to active on hover and provide a nice user experience.
 *
 * No license, do what you want. I'd love credit or a shoutout, though.
 *
 * http://cameronspear.com/blog/twitter-bootstrap-dropdown-on-hover-plugin/
 */
;(function($, window, undefined) {
    // outside the scope of the jQuery plugin to
    // keep track of all dropdowns
    var $allDropdowns = $();

    // if instantlyCloseOthers is true, then it will instantly
    // shut other nav items when a new one is hovered over
    $.fn.dropdownHover = function(options) {

        // the element we really care about
        // is the dropdown-toggle's parent
        $allDropdowns = $allDropdowns.add(this.parent());

        return this.each(function() {
            var $this = $(this).parent(),
                defaults = {
                    delay: 500,
                    instantlyCloseOthers: true
                },
                data = {
                    delay: $(this).data('delay'),
                    instantlyCloseOthers: $(this).data('close-others')
                },
                settings = $.extend(true, {}, defaults, options, data),
                timeout, subTimeout;

            $this.hover(function() {
                if(shouldHover()) {
                    if(settings.instantlyCloseOthers === true)
                        $allDropdowns.removeClass('open');

                    window.clearTimeout(timeout);
                    $(this).addClass('open');
                }
            }, function() {
                if(shouldHover()) {
                    timeout = window.setTimeout(function() {
                        $this.removeClass('open');
                    }, settings.delay);
                }
            });

            $this.find('.dropdown-submenu').hover(function() {
                if(shouldHover()) {
                    window.clearTimeout(subTimeout);
                }
                $(this).children('.dropdown-menu').show();
            }, function() {
                var $submenu = $(this).children('.dropdown-menu');
                if(shouldHover()) {
                    subTimeout = window.setTimeout(function() {
                        $submenu.hide();
                    }, settings.delay);
                } else {
                    // emulate Twitter Bootstrap's default behavior
                    $submenu.hide();
                }
            });
        });
    };

    // helper function to see if we should hover
    var shouldHover = function() { return !!$('#cwspear-is-awesome').height(); };
    $(document).ready(function() {
        // apply dropdownHover to all elements with the data-hover="dropdown" attribute
        $('[data-hover="dropdown"]').dropdownHover();

        // pure win here: we create these spans so we can test if we have the responsive css loaded
        // this is my attempt to hopefully make sure the IDs are unique
        $('
.
').appendTo('body');
    });

    // for the submenu to close on delay, we need to override Bootstrap's CSS in this case
    var css = '.dropdown-submenu:hover>.dropdown-menu{display:none}';
    var style = document.createElement('style');
    style.type = 'text/css';
    if (style.styleSheet) {
        style.styleSheet.cssText = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }
    $('head')[0].appendChild(style);
})(jQuery, this);

The markup must be the same as it normally is with Bootstrap's dropdowns, and then to activate, you just add data-hover="dropdown" where you'd add data-toggle="dropdown". For more options and usage, please go to GitHub

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
        Account <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">My Account</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Change Email</a></li>
        <li><a tabindex="-1" href="#">Change Password</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Logout</a></li>
    </ul>
</li>

Please report any bugs on GitHub, as it's easier to manage than bugs reported in the comments here. Also note that 99% of the issues people are having can be solved by double checking your markup!

Demo: Twitter Bootstrap: Dropdown on Hover
Fork: GitHub
Download: uncompressed | minified