jQuery mouseover 和 mouseleave 下拉菜单

Question

下面显示一个菜单:

<a href="#" id="cityclick">ONZE WAARDEN</a>

<div id="citydrop">
    <div class="dropbottom">
        <div class="dropmid">
            <ul>
                <li><a href="#">FAQ</a>
                </li>
                <li><a href="#">ITC</a>
                </li>
                <li><a href="#">CLUB</a>
                </li>
                <li><a href="#">CULTUUR</a>
                </li>
                <li><a href="#">ROBITICA</a>
                </li>
            </ul>
        </div>
    </div>
</div>

jQuery 如下:

$("#citydrop").hide();

$("#cityclick").mouseover(function () {
    $("#citydrop").slideDown('slow');
});

$("#citydrop").mouseleave(function () {
    $("#citydrop").slideUp('slow');
});

问题:当鼠标离开“cityclick”但尚未输入“citydrop”时，我无法弄清楚如何切换子菜单“citydrop”。

我在这里尝试过jsfiddle

Answer 1

在 html 上使用一些包装器，然后对其调用 mouseleave 事件，如下所示:http://jsfiddle.net/9yEHV/11/

$("#wrapper").mouseleave(function () {
    $("#citydrop").slideUp('slow');
});

和包装:

<div id="wrapper">
    <a href="#" id="cityclick" >ONZE WAARDEN</a>
    <!-- rest of your code -->
</div>