title: dropdown menu not fading away on mouseleave
body: <p>I would like to make the dropdown menu disappear on mouseleave. After I hover on the li, the drop down shows up and just stays there even if it isn't hovered. I had added <code>mouseleave</code> to <code>#nav &gt; li &gt; a</code> but it makes the dropdown disappear always not making it disappear only on mouseleave. so how can I fix this? I think the prob is on the jquery side.</p>
  
  <p>Here is a fiddle <a href="http://jsfiddle.net/RXRBm/8/" rel="nofollow">http://jsfiddle.net/RXRBm/8/</a></p>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$(document).ready(function () {
      $("#nav &gt; li &gt; 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);
          }
      });
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>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;
  }
  </code></pre>