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