jquery - 多类别下拉菜单

Question

我正在尝试创建类似 this 的类别菜单.

到目前为止我已经创建了这个:http://jsfiddle.net/q5GcD/

只有当我将鼠标移出 bigmenu div 时，大菜单才会关闭。

此外，我无法正确定位大菜单，使其与小菜单按钮重叠。

HTML :

<div id="mydiv">Menu</div>
<div id="bigmenu">This is big menu</div>

样式:

#mydiv {
    position:absolute;
    top:10px;
    left:50px;
    height:50px;
    width:200px;
    background-color:#fff;
    border:1px solid black;
}
#bigmenu {
    position:absolute;
    top:10px;
    left:50x;
    height:500px;
    width:200px;
    background-color:orangered;
}

脚本:

$(document).ready(function(){


    $('#bigmenu').css("display","none");
    $('#mydiv').hover(function(){
        $('#bigmenu').css("display","inline");

        },function(){
           $('#bigmenu').css("display","none");
            }

        );

});

Answer 1

你不需要 javascript，你可以只使用 :hover dynamic pseudo-class 用 CSS 来完成。

#bigmenu 应该是 #mydiv 的子级，而不是兄弟级，以便在您退出 #bigmenu 之前保持它的事件状态(而不仅仅是 #mydiv)。

你也不需要绝对位置。

演示:http://jsfiddle.net/q5GcD/1/

HTML

<div id="mydiv">
   Menu
   <div id="bigmenu">
      This is big menu
   </div>
</div>

CSS

#mydiv {
    min-height:50px;
    width:200px;
    background-color:#fff;
    border:1px solid black;
}

#mydiv:hover > #bigmenu{
    display: block;
}

#bigmenu {  
    display: none;
    height:500px;
    width:200px;
    background-color:orangered;
}

这一行:

#mydiv:hover > #bigmenu{

告诉浏览器对带有 id="bigmenu" 的元素应用方括号之间的规则，即子元素(带有 >，Child Selector )具有 id="myDiv" 的元素，当您将鼠标悬停在它上面时。

对于 sibling ，就像在您的原始 HTML 代码中一样，您应该使用 +，即 Adjacent Sibling Selector .