这招对我很管用:

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

为了加强Sudharshan的回答，我将其包装在一个媒体查询中，以防止在XS显示宽度上出现悬停……

@media (min-width:768px)
{
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;    
    }

    .nav .dropdown-menu {
        margin-top: 0;
    }
}

标记中的插入符号也不是必需的，只是li的下拉类。

最标准的回答:

支持aria-expanded属性 支持非触摸设备 支持触摸设备 支持所有下拉菜单

var isTouchDevice = (('ontouchstart' in window) ||
                                (navigator.MaxTouchPoints > 0) ||
                                (navigator.msMaxTouchPoints > 0));
if(!isTouchDevice){
    // open dropdowns on hover on non mobile devices
    $(".dropdown").hover(function(e) {
        $('.dropdown-toggle', this).dropdown("toggle");
        e.stopPropagation();
    });
    // prevent blinkling
    $(".submenu-link").click(function(e) {
        e.stopPropagation();
    });
}

如果你需要，你可以将$(".dropdown")更改为特定的区域:

$("#top-menu .dropdown")

除了来自“我的头很疼”的答案(这很棒):

ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;    
}

有两个挥之不去的问题:

单击下拉链接将打开下拉菜单。而且它会一直打开，除非用户点击其他地方，或者将鼠标悬停在它上面，创建一个尴尬的UI。 下拉链接和下拉菜单之间有1px的空白。如果您在下拉菜单和下拉菜单之间缓慢移动，这将导致下拉菜单变得隐藏。

(1)的解决方案是从nav链接中删除“class”和“data-toggle”元素

<a href="#">
     Dropdown
     <b class="caret"></b>
</a>

这还使您能够创建到父页面的链接——这在默认实现中是不可能的。您只需将“#”替换为您想要发送给用户的任何页面。

(2)的解决方案是删除.下拉菜单选择器上的margin-top

.navbar .dropdown-menu {
    margin-top: 0px;
}

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

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

如果你有这样一个下拉类的元素(例如):

<ul class="list-unstyled list-inline">
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-bars"></i> Dropdown 1</a>
        <ul class="dropdown-menu">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="">Item 5</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-user"></i> Dropdown 2</a>
        <ul class="dropdown-menu">
            <li><a href="">Item A</a></li>
            <li><a href="">Item B</a></li>
            <li><a href="">Item C</a></li>
            <li><a href="">Item D</a></li>
            <li><a href="">Item E</a></li>
        </ul>
    </li>
</ul>

然后你可以让下拉菜单自动下拉悬停，而不是必须点击它的标题，通过使用这段jQuery代码:

<script>
    $('.dropdown').hover(
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
        },
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
        }
    );

    $('.dropdown-menu').hover(
        function() {
            $(this).stop(true, true);
        },
        function() {
            $(this).stop(true, true).delay(200).fadeOut();
        }
    );
</script>

这是一个演示

这个答案依赖于@Michael的答案，我做了一些改变，并添加了一些补充，以使下拉菜单正常工作