почему раскрывающийся список jQuery скрывается при наведении курсора?

Question

У меня есть это раскрывающееся меню, созданное с помощью jQuery ( ИЗМЕНЕНО с первым ответом и все еще не работает :()

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;
    }
}  

Список, который он содержит, генерируется с помощью фрагмента wordpress (я надеюсь, это не проблема!):

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

Что я не могу понять, так это то, почему подчиненный элемент скрывается при наведении на него курсора, поскольку currentDrop имеет значение null и поэтому не «исключает» и не должен обманывать функцию hide. Что делать?

Ошибка видна в действии на этом временном сайте: gadefodbold.nicolund.dk

Answer 1

вместо парения, вы должны использовать mouseenter и mouseleave

У меня была такая же проблема, и с помощью mouseenter / mouseleave ее исправили.

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