jquery - 多类别下拉菜单

Question

我正在尝试创建这样的类别菜单。

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

仅当我将鼠标移出 bigmenu div 时，才应关闭大菜单。

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

网页：

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

CSS：

#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，您可以使用 CSS 仅使用:hover 动态伪类来完成。

#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"，即带有 的元素的子元素（带有>，子选择器） 。id="myDiv"

在兄弟的情况下，就像在您的原始 HTML 代码中一样，您应该使用+，即Adjacent Sibling Selector。

Answer 2

这是你想要的？
http://jsfiddle.net/q5GcD/2/

您的 css 中有一个拼写错误，50x而不是50px，它负责对齐。

至于JS，用mouseenter和mouseleave代替hover

Answer 3

这实际上是一个列表菜单:)

<ul>
    <li><a href=''>Cat drop</a>
    <ul>
        <li>
            <a href=''>second drop</a>
        </li>
    </ul>
    </li>
</ul>

快速CSS：

ul{
    list-style-type:none;
    padding:0px;
    margin:0px;
  }
ul >li {
    /* top style */
    background:#FF0000;
}
ul>li>ul{
    list-style-type:none;
    padding:0px;
    margin:0px;
    position:absolute;
    display:none;
    background:#00FF00;
}
ul>li:hover>ul{
   display:block;
}

使用最后一个选择器，您将不需要任何 jQuery 或 javascript。这就是我认为他们正在使用的，但我可能是错的。我认为你仍然可以使用两者？不是100％确定那个。