выпадающее меню не исчезает на mouseleave

Question

Я хочу, чтобы выпадающее меню исчезло на мышином фоне. После того, как я нахожусь на ли, выпадающее изображение появляется и просто остается там, даже если оно не зависает. Я добавил mouseleave в #nav > li > a, но при этом выпадающее меню исчезает, и оно не исчезает только на мышином фоне. так как я могу это исправить? Я думаю, что проблема находится на стороне 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(); 
});