悬停下拉菜单jQuery

Question

当我将鼠标悬停在主菜单上时，子菜单下拉列表将不会显示，请帮助我解决以下错误。

HTML看起来像这样：

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" 
              role="button" aria-expanded="false">
        Page<span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="404.html">404 Page</a></li>
      <li><a href="#">Link Two</a></li>
      <li><a href="#">Link Three</a></li>               
    </ul>
</li>

JavaScript代码如下：

$('ul.nav li.dropdown').hover(function() {

  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);

}, function() {

  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);

});

Answer 1

 $(document).ready(function() { $( '.dropdown' ).hover( function(){ $(this).children('.dropdown-menu').slideDown(200); }, function(){ $(this).children('.dropdown-menu').slideUp(200); } ); }); // end ready 

 .dropdown-menu { display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> Page<span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="404.html">404 Page</a></li> <li><a href="#">Link Two</a></li> <li><a href="#">Link Three</a></li> </ul> </li>