我已经发布了一个Bootstrap 3下拉悬停功能的插件，在这个插件中，你甚至可以定义点击下拉切换元素时发生的事情(点击可以被禁用):

https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover

既然已经有很多解了，我为什么要做这个?

我对所有之前存在的解决方案都有问题。简单的CSS没有在.dropdown上使用.open类，所以当下拉可见时，下拉切换元素上没有反馈。

js的那些干扰点击.dropdown-toggle，所以下拉菜单显示在悬停，然后隐藏它时，点击一个打开的下拉菜单，移动鼠标将触发下拉菜单再次显示。一些js解决方案破坏了iOS的兼容性，一些插件不能在支持触摸事件的现代桌面浏览器上工作。

这就是为什么我只使用标准的Bootstrap javascript API来防止所有这些问题的Bootstrap下拉悬停插件，没有任何hack。甚至Aria属性在这个插件中也工作得很好。

这将隐藏下拉列表和它们的插入符号，如果它们比平板电脑小。

@media (max-width: 768px) {
    .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
        display: none;
    }
}

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

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

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

最好的方法是用鼠标悬停来触发Bootstrap的点击事件。这样，它应该仍然保持触摸设备友好。

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});

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

版本2的解决方案非常简单，只有CSS。 保持相同的友好功能的手机和平板电脑。

@media (min-width: 980px) {
    .dropdown:hover .dropdown-menu {
       display: block;
    }
}