jquery下拉菜单

Question

我有问题创建下拉菜单使用jQuery和CSS。这里是我的html

<nav class="topNav"> 
     <ul> 
      <li> 
       <a href="#menu" class="menu-toggle"><img src="img/main.png" /></a> 
      </li> 
      <li> 
       <a href="#social" class="menu-toggle"><img src="img/social.png" /></a> 
      </li> 
     </ul> 
    </nav> 
    <div class='cssmenu' id="menu"> 
     <ul> 
      <li class='active'> 
       <a href='index.html'><span>Home</span></a> 
      </li> 
      <li class='has-sub'> 
       <a href='#'><span>Products</span></a> 
       <ul> 
        <li class='has-sub'> 
         <a href='#'><span>Product 1</span></a> 
         <ul> 
          <li> 
           <a href='#'><span>Sub Item</span></a> 
          </li> 
          <li class='last'> 
           <a href='#'><span>Sub Item</span></a> 
          </li> 
         </ul> 
        </li> 
        <li class='has-sub'> 
         <a href='#'><span>Product 2</span></a> 
         <ul> 
          <li> 
           <a href='#'><span>Sub Item</span></a> 
          </li> 
          <li class='last'> 
           <a href='#'><span>Sub Item</span></a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li> 
       <a href='#'><span>About</span></a> 
      </li> 
      <li class='last'> 
       <a href='#'><span>Contact</span></a> 
      </li> 
     </ul> 
    </div> 
    <div class='cssmenu' id="social"> 
     <ul> 
      <li> 
       <a href='http://www.facebook.com'><img src="img/facebook.png" /></a> 
       <a href='#'><img src="img/linked.png" /></a> 
       <a href='#'><img src="img/twitter.png" /></a> 
      </li> 
     </ul> 
    </div> 

，这里是我的jQuery

$(document).ready(function(){ 
      $(".cssmenu ul").hide(); 
      var id; 
      $("a.menu-toggle").mouseenter(function(){ 
       id=$(this).attr("href"); 
       list=$($(this).attr("href")).children().first(); 
       list.stop(true,false).slideDown("fast"); 
      }); 
      $("a.menu-toggle").mouseleave(function(){ 
        list=$(id).children().first(); 
        list.stop(true,false).slideUp("fast"); 
      }); 
     }); 

这里是我的导航栏

https://drive.google.com/file/d/0B0sCu8aj8zu2SnBuSl9BRmQ1SEE/edit?usp=sharing 

那一刻我尝试移动到其向上滑动下拉的视频。如果我删除锚标签的mouseleave事件，那么我可以进入下拉菜单，但他们开始堆叠起来。

任何与此有关的帮助将非常感谢你。

Answer 1

尝试

$(document).ready(function(){ 
    $('.cssmenu ul').hide(); 
    $('a.menu-toggle').hover(function() { 
     var $target = $($(this).attr('href')).children('ul'); 
     console.log($target.get()) 
     clearTimeout($target.data('hoverTimer')); 
     $target.stop(true, true).slideDown(500); 
    }, function() { 
     var $target = $($(this).attr('href')).children('ul'); 
     var timer = setTimeout(function() { 
      $target.stop(true, true).slideUp(); 
     }, 200); 
     $target.data('hoverTimer', timer); 
    }); 

    $('.cssmenu > ul').hover(function() { 
     clearTimeout($(this).data('hoverTimer')); 
    }, function() { 
     $(this).stop(true, true).slideUp(); 
    }); 

}); 

演示：Fiddle