[HTML][JavaScript]$(this).find('li').first().slideDown(500) Opcje

[followc]

witam, stworzylem menu, które wygląda następująco:

[HTML] pobierz, plaintext 
<nav id="top_menu">
		<ul>
			<li id="kid1"><a href="" title="" >AKTUALNOŚCI</a></li><li id="kid2">					
				<a href="" >SPRAWDŹ SIĘ!</a>  
				 <!-- <ul> 		 
					<li><a href="#" title="">Strony www</a></li> 		 
				  </ul> -->		 
			</li><li id="kid3">			  
				<a href="" title="" >OFERTA<img  src="arrow.png"/></a>
					<ul>
						<li><a href="#">KURS</a></li>
						<li><a href="#">INDYWIDUALNE SZKOLENIE ONLINE</a></li>
						<li><a href="#">ZAGRAJ Z TRENEREM NA ŻYWO</a></li>
					</ul>			
			</li><li id="kid4">			
				<a href="" title="" >O NAS</a></li><li id="kid5">
 
			<a href="" title="" >TROSZKE INFORMACJI<img  src="arrow.png"/></a>			
				<ul> 		 
					<li><a href="#" title="aj">Zasady</a></li> 		  
					<li><a href="#" title="baj">Strony www</a></li> 		  
					<li><a href="#" title="cabaj">Gdzie grać?</a></li> 		 
				</ul> 			
			</li><li id="kid6">	
			<a href="" title="" >KONTAKT</a></li>									
		</ul>		
	</nav>
[HTML] pobierz, plaintext 

Dwie pozycje(#kid3,#kid5) posiadają rozwijane podmenu. Rozwijanie to chciałem nieco upiększyć używając funkcji jQuery slideDown/slideUp. Po najechaniu na odpowiednie menu podmenu rozwija sie pieknie, kiedy jednak próbuje dodać funkcje zwijającą po opuszczeniu obszaru tego menu, rolka świruje zwijając sie i rozwijając w nieskończonośc.

[HTML] pobierz, plaintext 
$('#kid3, #kid5').mouseover(function(){
		$(this).find('ul').first().slideDown(500, function(){
				$('#kid3,#kid5').mouseout(function(){
					$(this).find('ul').first().slideUp(500);
				});
			});		
	});
[HTML] pobierz, plaintext 

C
Czy ktoś wytłumaczy mi w czym tkwi mój błąd?