在Twitter Bootstrap没有实现，但你可以使用这个插件

更新1:

同样的问题

    $('.navbar .dropdown').hover(function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
    }, function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
    });

用jquery的Bootstrap 5版本

只需添加悬停类下拉和添加以下代码到主javascript文件

// Hoverable dropdown
$('.dropdown.hoverable').on({
    mouseenter: function(){
        var dropdown = $(this).children('.dropdown-menu');
        if(!dropdown.hasClass('show') && dropdown.css('position') !== 'static'){ // Ignore collapsed navbar
            bootstrap.Dropdown.getOrCreateInstance(this).toggle();
        }
    },
    mouseleave: function(){
        var dropdown = $(this).children('.dropdown-menu');
        if(dropdown.hasClass('show') && dropdown.css('position') !== 'static'){ // Ignore collapsed navbar
            bootstrap.Dropdown.getOrCreateInstance(this).toggle();
        }
    }
});

这将帮助你创建你自己的用于引导的hover类:

CSS:

/* Hover dropdown */
.hover_drop_down.input-group-btn ul.dropdown-menu{margin-top: 0px;}/*To avoid unwanted close*/
.hover_drop_down.btn-group ul.dropdown-menu{margin-top:2px;}/*To avoid unwanted close*/
.hover_drop_down:hover ul.dropdown-menu{
   display: block;
}

设置页边距是为了避免不必要的关闭，它们是可选的。

HTML:

<div class="btn-group hover_drop_down">
  <button type="button" class="btn btn-default" data-toggle="dropdown"></button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

不要忘记删除按钮属性data-toggle="dropdown"如果你想删除onclick open，这也适用于输入附加下拉。

使用mouseover()函数触发单击。这样就不会对以前的点击事件造成伤害。用户可以使用悬停和点击/触摸。它将是移动友好的。

$(".dropdown-toggle").mouseover(function(){
    $(this).trigger('click');
})

最简单的解决方案是CSS。加上一些像……

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* remove the gap so it doesn't close */
}

工作小提琴