Código:
<script type="text/javascript">
$().ready(function(){
$('ul li').hover(function(){
$(this).children().each(function(e){
$(this).stop()
$(this).slideDown('slow');
return false;
});
}, function(){
$(this).children().each(function(e){
$(this).stop()
$(this).slideUp('slow');
return false;
});
})
});
</script>
He hecho un par de cosas:
Primero he sustituido el mouseover() y mouseout() por un hover().
Lo que hace
hover() es que en un mismo evento tenemos dos eventos con sus respectivas funciones, en este caso el primer evento será cuando entre el ratón y el segundo cuando salga, esto es un añadido mio ya que el tener menos eventos que funcionen igual facilitan las cosas para mi gusto al menos.
Después he añadido antes de cada evento de animación un $(this).stop(), esto hace que la animación que esté ejecutándose en ese momento la pare y de paso a la animación que llamaremos a continuación.
He probado el código así y creo que soluciona el problema, de todas formas asegúrate y nos cuentas.
Saludos!