我是这样做的:

$('ul.nav li.dropdown').hover(function(){
       $(this).children('ul.dropdown-menu').slideDown(); 
    }, function(){
       $(this).children('ul.dropdown-menu').slideUp(); 
});

我希望这能帮助到一些人……

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

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

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

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

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

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

使用以下代码在鼠标悬停时打开子菜单(仅适用于桌面):

$('ul.nav li.dropdown').hover(function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').show();
    }
}, function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').hide().css('display','');
    }
});

如果你想让第一关菜单是可点击的，甚至在手机上也可以添加这个:

    $('.dropdown-toggle').click(function() {
    if ($(this).next('.dropdown-menu').is(':visible')) {
        window.location = $(this).attr('href');
    }
});

子菜单(下拉菜单)将打开鼠标悬停在桌面上，点击/触摸移动和平板电脑。 一旦子菜单打开，第二次单击将让您打开链接。 多亏了if ($(window).width() > 767)，子菜单将在移动设备上采用全屏宽度。

这个也可以。

$('.dropdown').on('mouseover',function(){
    $(this).find('.dropdown-menu').show();
});
$('.dropdown').on('mouseleave',function(){
    $(this).find('.dropdown-menu').hide();
});

如果下拉菜单在悬停元素之间有间隙，下拉菜单将立即关闭，如图所示

为了防止这种行为，您可以为事件添加一个100毫秒的超时

let dropdownTimer;
$('.dropdown').on('mouseover', () => {
    clearTimeout(dropdownTimer)
    $(this).find('.dropdown-menu').show();
});
$('.dropdown').on('mouseleave', () =>{
    dropdownTimer = setTimeout(() => {
        $(this).find('.dropdown-menu').hide();
    }, 100)
});

 <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <script>
        $('ul.nav li.dropdown').hover(function() {
        $(this).find('.dropdown-menu').stop(true, 
        true).delay(200).fadeIn(500);
        }, function() {
        $(this).find('.dropdown-menu').stop(true, 
        true).delay(200).fadeOut(500);
        });
      </script>

这是Bootstrap 3内置的。 只需将此添加到您的CSS:

.dropdown:hover .dropdown-menu {
    display: block;
}