我有一个带有CSS代码的CSS / HTML菜单:
#nav {
background-color:#F36F25;
margin:0 0 5px 0;
width: 100%;
height:35px;
left:0;
z-index:1;
border-top:2px solid #FFFFFF;
border-bottom:2px solid #FFFFFF;
}
#nav>li {
float:left;
list-style:none;
}
#nav li:hover ul {
position:absolute;
display:block;
z-index:9999;
}
#nav li a {
display: inline-block;
padding: 8px;
margin:0;
background: #F36F25;
text-decoration: none;
color: #FFFFFF;
border:1px solid #F36F25;
}
#nav li:hover > a, #nav li a.active {
color:#F36F25;
background: #FFFFFF;
border:1px solid #F36F25;
cursor:pointer;
}
#nav li ul {
position:absolute;
display: none;
list-style:none;
margin:0;
}
#nav li ul li {
margin-top:0;
margin-right:0;
margin-bottom:0;
margin-left:-40px;
}
#nav li ul li a {
background-color: #F36F25;
color:#FFFFFF;
border:1px solid #F36F25;
width:145px;
}
#nav li ul li a:hover {
background-color: #FFFFFF;
color:#F36F25;
border:1px solid #f36f25;
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
如何确保onhover事件保持不变,但是在点击时显示子菜单,而不是当用户在父链接上悬停时?
如果需要,我很乐意使用Jquery或Javascript,但如果可能的话,完整的CSS会很好
答案 0 :(得分:0)
我认为你可以:focus
而不是:hover
这样
更新此代码
或通过js fiddle
#nav li:focus ul {
position:absolute;
display:block;
z-index:9999;
}
答案 1 :(得分:0)
假设您想要在元素click
上更改显示策略。我们假设您的元素有selector
。在这种情况下,您可以使用jQuery定义此事件:
$(selector).click(function() {
if ($(this).hasClass("clicked")) {
$(this).removeClass("clicked");
} else {
$(this).addClass("clicked");
}
});
你需要为.clicked
添加一些CSS。我们假设你的选择器是#foo
。然后你需要这样的规则:
#foo {
/*Add some stuff*/
}
#foo.clicked {
/*Add some stuff*/
}