jQuery的下拉菜单在鼠标悬停时不起作用

Question

我正在尝试做一个简单的下拉菜单来显示鼠标悬停时的状态，此脚本显示了另一个带有链接的div。

一切正常，但是当我尝试选择一个链接时，另一个div隐藏。

jQuery(document).ready(function() {
    jQuery("#menu_link").mouseover(function() {

        jQuery(".1").show();

    });

  jQuery("#menu_link").mouseout(function() {

        jQuery(".1").hide();

    });

});

http://jsfiddle.net/sx8o1tbh/1/

如果您将光标放在“ Inicio”一词上，则会看到它显示了带有链接的另一个div，但是当我尝试转到该新的div时，它就隐藏了，我认为jQuery代码有问题。

谢谢您的帮助。

Answer 1

问题不在JavaScript代码中。 我刚刚更改了CSS，并避免了菜单和子菜单之间的空隙：

#show_links
{
top:35px;
position:absolute;
min-width:10%;
width:auto;
min-height:100px;
height:auto;
border:2px solid;
}

http://jsfiddle.net/sx8o1tbh/7/

Answer 2

 $(document).ready(function () {


    $("#menu_link").mouseenter (function () {

        $(".1").show();

    });

    $("#show_links").mouseleave (function () {

        $(".1").hide();

    });

     $("#menu_link").mouseleave (function () {

        $(".1").hide();

    });

});

或者这可以做到jQuery