jQuery: Странное поведение в моем меню

Question

Я пытаюсь создать меню с HTML, CSS и jQuery. Он работает, как бы то ни было. Когда я наводил курсор на основное меню, появляется подменю. Но, если я попытаюсь переместить мышь ниже первого подменю, она исчезнет. Я включу свой JsFiddle. Вот код:

HTML:

  <ul id="menu"> 
      <li><a href="#">Categories 1</a> 
       <ul id="cat1"> 
        <li class="first"><a href="#">temp1</a></li> 
        <li><a href="#">temp2</a></li> 
        <li><a href="#">temp3</a></li> 
       </ul> 
      </li> 
     </ul> 

CSS:

#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 > li{ 
    display: inline; 
} 

li a { 
    color: #fff; 
    text-decoration: none; 
} 

.first{ 
    margin-top: 12px; 
} 

#cat1 > li{ 
    display: block; 
    width: 150px; height: auto; 
    margin-left: auto; margin-right: auto; 
} 

#cat1 > li > a{ 
    display:block; 
    background-color: #0000FF; 
    padding: 10px; 
    box-shadow: inset 0px 0px 2px #000; 
} 

JQuery:

$('#cat1 > li > a').hide(); 
$('#menu > li > a').mouseenter(function(){ 
    $('#cat1 > li > a').slideDown('slow').css({display: 'block'}); 
}); 

$('#cat1 > li > a').mouseleave(function(){ 
    $('#cat1 > li > a').slideUp('slow').css({display: 'block'}); 
}); 

http://jsfiddle.net/ZfN7t/19/

Спасибо за любую помощь!

Answer 1

Я добавил некоторые CSS:

#menu > li { 
    display: inline-block; 
} 

#cat1 { 
    display:none; 
} 

#menu a:hover { 
    color: #dc692e; 
} 

и упростили Javascript:

$('#menu > li').hover(function(){ 
    $('#cat1').slideDown('slow'); 
},function(){ 
    $('#cat1').stop().slideUp('slow'); 
});