多个类别下拉菜单

时间:2013-01-18 16:04:41

标签: jquery html css menu

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

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

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

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

Html:

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

        );

});

3 个答案:

答案 0 :(得分:2)

您不需要使用javascript,只能使用:hover 动态伪类来使用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&gt; #bigmenu {

告诉浏览器在id="bigmenu"元素的括号之间应用规则,即>元素的子元素(带有id="myDiv"Child Selector)当你将鼠标悬停在鼠标上时(

如果是兄弟姐妹,就像原始HTML代码一样,您应该使用+,即Adjacent Sibling Selector

答案 1 :(得分:1)

这是你要找的吗?
http://jsfiddle.net/q5GcD/2/

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

对于JS,使用mouseenter和mouseleave而不是悬停

答案 2 :(得分:0)

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

<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%肯定那个。