title: jQuery: Strange behavior in my menubar
body: <p>I'm trying to make a menubar with HTML, CSS and jQuery. It is working, kind of. When i hover over my main-menu, the submenu appears. But, if I try to move my mouse down past the first submenu, it disappears. I'll include my JsFiddle. Here is the code:</p>
  
  <p>HTML:</p>
  
  <pre><code>         &lt;ul id="menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Categories 1&lt;/a&gt;
                  &lt;ul id="cat1"&gt;
                      &lt;li class="first"&gt;&lt;a href="#"&gt;temp1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;temp2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;temp3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#menu {
    background-color: #0000FF;
    height: 20px;
    padding: 15px 0 10px;
    margin: 5px;
    font: 12px Tahoma;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: inset 0px 0px 10px #000;
    text-align: center;
  } 
  
  #menu &gt; li{
    display: inline;
  }
  
  li a {
    color: #fff;
    text-decoration: none;
  }
  
  .first{
    margin-top: 12px;
  }
  
  #cat1 &gt; li{
    display: block;
    width: 150px; height: auto;
    margin-left: auto; margin-right: auto;
  }
  
  #cat1 &gt; li &gt; a{
    display:block;
    background-color: #0000FF;
    padding: 10px;
    box-shadow: inset 0px 0px 2px #000;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('#cat1 &gt; li &gt; a').hide();
  $('#menu &gt; li &gt; a').mouseenter(function(){
      $('#cat1 &gt; li &gt; a').slideDown('slow').css({display: 'block'});
  });
  
  $('#cat1 &gt; li &gt; a').mouseleave(function(){
      $('#cat1 &gt; li &gt; a').slideUp('slow').css({display: 'block'});
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ZfN7t/19/" rel="nofollow">http://jsfiddle.net/ZfN7t/19/</a></p>
  
  <p>Thanks for any help!</p>