我正在尝试创建类似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");
}
);
});
答案 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%肯定那个。