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

用悬停触发单击事件有一个小错误。如果鼠标进入，然后点击会产生相反的效果。鼠标移出时打开，鼠标移进时关闭。一个更好的解决方案:

$('.dropdown').hover(function() {
    if (!($(this).hasClass('open'))) {
        $('.dropdown-toggle', this).trigger('click');
    }
}, function() {
    if ($(this).hasClass('open')) {
        $('.dropdown-toggle', this).trigger('click');
    }
});

我尝试其他解决方案，我使用bootstrap 3，但下拉菜单关闭得太快，无法移动它

假设您在li中添加class="dropdown"，我添加了一个超时

var hoverTimeout;
$('.dropdown').hover(function() {
    clearTimeout(hoverTimeout);
    $(this).addClass('open');
}, function() {
    var $self = $(this);
    hoverTimeout = setTimeout(function() {
        $self.removeClass('open');
    }, 150);
});

测试和工作良好

<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>

最好的方法是用悬停来触发引导点击事件。这样，它应该仍然保持触摸设备友好

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

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

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

工作小提琴