这个插件在GitHub上，我正在做一些改进(比如只使用数据属性(不需要JS))。我把代码留在下面，但它与GitHub上的不一样。

我喜欢纯CSS版本，但它在关闭前有一个延迟是很好的，因为它通常是一个更好的用户体验(即不会因为鼠标滑到下拉框外1px而受到惩罚，等等)，并且正如评论中提到的，有1px的边缘，你必须处理，或者有时当你从原始按钮移动到下拉框时，导航意外关闭，等等。

我创建了一个快速的小插件，我已经在几个网站上使用了，它工作得很好。每个导航项都是独立处理的，所以它们都有自己的延迟计时器等。

JS

// 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')
            },
            options = $.extend(true, {}, defaults, options, data),
            timeout;

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

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

delay参数是不言自明的，而instantlyCloseOthers会在鼠标悬停在一个新下拉列表上时立即关闭所有其他打开的下拉列表。

不是纯粹的CSS，但希望能在这个晚些时候帮助其他人(即这是一个旧线程)。

如果您愿意，您可以看到我通过以下要点中的不同步骤(在#concrete5 IRC上的讨论中)使其工作的不同过程:https://gist.github.com/3876924

插件模式方法在支持单个计时器等方面更加简洁。

请参阅博客文章了解更多信息。

这可能是一个愚蠢的想法，但要删除指向向下的箭头，您可以删除

<b class="caret"></b>

不过，这对向上的那个没有任何作用……

你有这样的代码:

<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>

<ul class="dropdown-menu" role="menu">
    <li>Link 1</li>
    <li>Link 2</li> 
    <li>Link 3</li>                                             
</ul>

通常它在单击事件上工作，而您希望它在悬停事件上工作。这是非常简单的，只需使用JavaScript/jQuery代码:

$(document).ready(function () {
    $('.dropdown-toggle').mouseover(function() {
        $('.dropdown-menu').show();
    })

    $('.dropdown-toggle').mouseout(function() {
        t = setTimeout(function() {
            $('.dropdown-menu').hide();
        }, 100);

        $('.dropdown-menu').on('mouseenter', function() {
            $('.dropdown-menu').show();
            clearTimeout(t);
        }).on('mouseleave', function() {
            $('.dropdown-menu').hide();
        })
    })
})

这工作得很好，这里是解释:我们有一个按钮，和一个菜单。当我们悬停按钮时，我们会显示菜单，当我们将鼠标移出按钮时，我们会在100毫秒后隐藏菜单。如果你想知道我为什么使用它，是因为你需要时间从菜单上的按钮拖动光标。当你在菜单上时，时间会被重置，你可以在那里停留多长时间都行。当您退出菜单时，我们将立即隐藏菜单，没有任何超时。

我已经在许多项目中使用了这段代码，如果您在使用它时遇到任何问题，请随时向我提问。

我们看到，除了“My Head Hurts”的答案，“Cory Price”还发现了两个问题:

问题1:单击下拉链接将打开下拉菜单。它会一直打开，除非用户点击某个地方 或者返回到它上面，创建一个尴尬的UI。 解决方案:从导航链接中删除“class”和“data-toggle”元素

这个解决方案近乎完美，但这里的问题是，当涉及到移动设备和平板电脑时，它就行不通了!

我使用了一些jQuery代码来修复这个问题..

if ($(window).width() > 769) {
    $('.dropdown-toggle').removeAttr('data-toggle');
    $('.dropdown-menu').removeAttr('style');
    $('.dropdown').removeClass('open');
}
$(window).resize(function () {
    if ($(window).width() > 769) {
        $('.dropdown-toggle').removeAttr('data-toggle');
        $('.dropdown-menu').removeAttr('style');
        $('.dropdown').removeClass('open');
    }
    else {
        $('.dropdown-toggle').attr("data-toggle", "dropdown");
    }
});

注意:这里我们假设移动设备和平板电脑的折痕从768px开始。

为那些想在移动设备上使用默认功能的用户添加这个功能。可以设置min-width:…根据需要

@media only screen and (min-width: 1195px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
  ul.nav li.dropdown> ul.dropdown-menu {
    display: none;
  }
}

设置display: none，这样下拉开关就不会产生问题。如果保持原样，可能会同时打开两个下拉列表。

以下是我的技巧，它在你停止在菜单或切换按钮上悬停后，在菜单关闭之前添加了轻微的延迟。你通常点击来显示导航菜单的<按钮>是#nav_dropdown。

$(function() {
  var delay_close_it, nav_menu_timeout, open_it;
  nav_menu_timeout = void 0;
  open_it = function() {
    if (nav_menu_timeout) {
      clearTimeout(nav_menu_timeout);
      nav_menu_timeout = null;
    }
    return $('.navbar .dropdown').addClass('open');
  };
  delay_close_it = function() {
    var close_it;
    close_it = function() {
      return $('.navbar .dropdown').removeClass('open');
    };
    return nav_menu_timeout = setTimeout(close_it, 500);
  };
  $('body').on('mouseover', '#nav_dropdown, #nav_dropdown *', open_it).on('mouseout', '#nav_dropdown', delay_close_it);
  return $('body').on('mouseover', '.navbar .dropdown .dropdown-menu', open_it).on('mouseout', '.navbar .dropdown .dropdown-menu', delay_close_it);
});