如何在html中创建一个下拉导航栏部分只在悬停而不是单击时才能工作？

Question

这是我想要制作的导航栏的一部分代码。对于＆＃34;我们的曲目＆＃34;部分，我有一个链接，但它没有打开，因为点击它打开下拉菜单。我希望这个菜单只在它悬停时打开，而不是点击。

<div id="navbarCollapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        <li class="active"><a href="about.html">About</a>
            </li>
        <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" 
         href="our%20tracks.html">Our Tracks<b> class="caret"></b></a>
        <ul class="dropdown-menu">
               <li><a href="#">Robotics</a></li>
               <li><a href="#">Automation</a></li>
               <li><a href="#">Programming</a></li>
               <li class="divider"></li>
        </ul>
    </li>
</div>

Answer 1

然后你必须编写自己的自定义JQuery代码来覆盖默认的引导行为，如下所示：

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