你有这样的代码:

<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>

<ul class="dropdown-menu" role="menu">
    <li>Link 1</li>
    <li>Link 2</li> 
    <li>Link 3</li>                                             
</ul>

通常它对点击事件起作用，你希望它对悬停事件起作用。这是非常简单的，只需使用javascript/jquery代码:

$(document).ready(function () {
    $('.dropdown-toggle').mouseover(function() {
        $('.dropdown-menu').show();
    })

    $('.dropdown-toggle').mouseout(function() {
        t = setTimeout(function() {
            $('.dropdown-menu').hide();
        }, 100);

        $('.dropdown-menu').on('mouseenter', function() {
            $('.dropdown-menu').show();
            clearTimeout(t);
        }).on('mouseleave', function() {
            $('.dropdown-menu').hide();
        })
    })
})

这工作得很好，这里是解释:我们有一个按钮，和一个菜单。当我们悬停按钮时，我们会显示菜单，当我们将鼠标移出按钮时，我们会在100ms后隐藏菜单。如果你想知道我为什么使用它，是因为你需要时间从菜单上的按钮拖动光标。当你在菜单上时，时间会被重置，你可以在那里停留多长时间都行。当您退出菜单时，我们将立即隐藏菜单，没有任何超时。

我已经在许多项目中使用了这段代码，如果您在使用它时遇到任何问题，请随时向我提问。

这只在你不在移动设备上时悬浮导航栏，因为我发现在移动设备上悬浮导航栏并不好:

    $( document ).ready(function() {

    $( 'ul.nav li.dropdown' ).hover(function() {
        // you could also use this condition: $( window ).width() >= 768
        if ($('.navbar-toggle').css('display') === 'none' 
            && false === ('ontouchstart' in document)) {

            $( '.dropdown-toggle', this ).trigger( 'click' );
        }
    }, function() {
        if ($('.navbar-toggle').css('display') === 'none'
            && false === ('ontouchstart' in document)) {

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

});

尝试使用带有淡出淡出动画的悬停功能

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

测试和工作良好

<nav class="dnt_show_mbl navbar navbar-default navbar-fixed-top" >
  <div class="container" style="width:100%;">
    <div class="navbar-header" style="height:90px;">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>

      <a class="navbar-brand dnt_show_mbl" href="index.html" style="margin-left:100%;margin-top:2%;">
        <img src="material/logo.png" width="160px;" alt="visoka">
      </a>
      <a class="navbar-brand dontdisplaylg" href="index.html" style="" alt="visoka">
        <img src="material/logo.png" width="200px;">
      </a>

    </div>

    <div class="collapse navbar-collapse" id="myNavbar" style="background-color: #fff;border-color:#fff;">
      <ul class="nav navbar-nav navbar-right" style="margin-top: 4px;margin-right: 180px;padding:15px;letter-spacing:1px;color:#000;">

        <li><a href="index.html" style="font-family: Inter !important;">HOME</a></li>
        <li><a href="About-Us.html" style="font-family: Inter !important;">ABOUT US</a></li>

        <li class="dropdown-header" style="margin-top:-3px;margin-left:-3%;" onmouseout="out_menu();" onmouseover="on_menu();">
        <a style="font-family: Inter !important;" class="dropdown-toggle" href="Projects.html">PROJECTS
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="Projects.html#ongoing" style="font-family: Inter !important;">Ongoing Projects</a></li><br>
          <li><a href="Projects.html#completed" style="font-family: Inter !important;">Completed Projects</a></li><br>
          <li><a href="Projects.html#upcoming" style="font-family: Inter !important;">Upcoming Projects</a></li>
        </ul>
      </li>
      </ul>
    </div>
  </div>
</nav>

  <script>
function on_menu(){
$(".dropdown-header:first").addClass("open");
}

function out_menu(){
$(".dropdown-header:first").removeClass("open");
}
</script>

这将帮助你创建你自己的用于引导的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，这也适用于输入附加下拉。

悬停在导航项上，看到它们在悬停时激活。 http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#