你可以使用Jquery实现这个功能:

$('.dropdown').on('mouseover', function(){
    $(this).addClass('show');
    $('.dropdown-menu').addClass('show');
    $('.dropdown-toggle').attr('aria-expanded', 'true');

});
$('.dropdown').on('mouseout', function(){
    $(this).removeClass('show');
    $('.dropdown-menu').removeClass('show');
    $('.dropdown-toggle').attr('aria-expanded', 'false');
});

对于CSS来说，当你点击它的时候，它会变得疯狂。这是我正在使用的代码，它也没有改变任何移动视图。

$('.dropdown').mouseenter(function(){
    if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
        if(!$(this).hasClass('open')) { // Keeps it open when hover it again
            $('.dropdown-toggle', this).trigger('click');
        }
    }
});

超文本标记语言

        <div class="dropdown">

            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                Dropdown Example <span class="caret"></span>
            </button>

            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>

        </div> 

jquery

        $(document).ready( function() {                

            /* $(selector).hover( inFunction, outFunction ) */
            $('.dropdown').hover( 
                function() {                        
                    $(this).find('ul').css({
                        "display": "block",
                        "margin-top": 0
                    });                        
                }, 
                function() {                        
                    $(this).find('ul').css({
                        "display": "none",
                        "margin-top": 0
                    });                        
                } 
            );

        });

codepen

用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();
        }
    }
});

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

更新1:

同样的问题

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

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

工作小提琴