why does my jQuery drop-down hide when I hover it?

Question

I have this drop-down menu made with jQuery (EDITED with first answer and still not working :( )

var currentDrop = null;
var dropTimer;
$(document).ready(function() {
    $("ul#menu > li").mouseenter(function(){
    if(currentDrop) hideDrops();
    currentDrop = $(this).children("ul");
    currentDrop.show();
    }).mouseleave(function() {
        dropTimer = setTimeout("hideDrops()",500);
        });

$("ul#menu li ul li").mouseenter(function() {
    clearTimeout(dropTimer);
    }).mouseleave(function() {
        dropTimer = setTimeout("hideDrops()",500);
        });

});

function hideDrops(){
    if(currentDrop) {
        currentDrop.hide();
        currentDrop = null;
    }
}  

The list it's containing is generated with the wordpress-snippet (not the problem i hope!):

<ul id="menu">
<?php wp_list_pages("title_li=&depth=2&exclude=2");?>
</ul>

What I can't understand is why the sub-ul's hides when I hover it, since currentDrop is set to null and therefore not 'excisting' and shouldn't tricker the hide-function. What to do?

The error can be seen in action on this temporary site: gadefodbold.nicolund.dk

Answer 1

instead of hover, you should use mouseenter and mouseleave

I've had this same problem before and using mouseenter/mouseleave fixed it.

http://api.jquery.com/mouseleave/