下拉菜單不會在mouseleave上消失

Question

我想讓下拉菜單在mouseleave上消失。在我徘徊在李的位置之後，即使沒有徘徊，下拉菜單也會顯示並保持在那裏。我已經將mouseleave添加到#nav > li > a，但它使下拉消失總是不會使它只在mouseleave上消失。所以我該如何解決這個問題？我認爲這個概率是在jQuery方面。

這裏是一個小提琴http://jsfiddle.net/RXRBm/8/

的JavaScript

$(document).ready(function() { 
    $("#nav > li > a").on('mouseenter', function (e) { 
     if ($(this).parent().has("ul")) { 
      e.preventDefault(); 
     } 
     if (!$(this).hasClass("open")) { 
      // hide any open menus and remove all other classes 
      $("#nav li ul").slideUp(350); 
      $("#nav li a").removeClass("open"); 
      // open our new menu and add the open class 
      $(this).next("ul").slideDown(350); 
      $(this).addClass("open"); 
     } else if ($(this).hasClass("open")) { 
      $(this).removeClass("open"); 
      $(this).next("ul").slideUp(350); 
     } 
    }); 
}); 

CSS

li { 
    list-style:none; 
} 
#nav { 
    float: left; 
    border-top: 1px solid #999; 
    border-right: 1px solid #999; 
    border-left: 1px solid #999; 
} 
#nav li { 
    position:relative; 
} 
#nav li a { 
    width: 200px; 
    display: block; 
    padding: 10.7px; 
    background:#ccc; 
    border-top: 1px solid #eee; 
    border-bottom: 1px solid #999; 
    border-width:0.2px; 
    text-decoration: none; 
    color: #000; 
} 
#nav li a:hover, #nav li a.active { 
    background: #999; 
    color: #fff; 
} 
#nav li ul { 
    display: none; 
    position:absolute; 
    left:181px; 
    top:-1px; 
} 
#nav li ul li a { 
    padding: 10px; 
    background:#C01F25; 
    opacity:0.95; 
    border-bottom: 0.1px solid red; 
} 

Answer 1

Demo

$("#nav>li").on('mouseleave',function(){  
    $(this).children().eq(1).hide(); 
});