I have a CSS/HTML menu with this CSS code:
#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;
}
How can i ensure the onhover events stay but make the sub menus show on click rather than when the users hovers on the parent link?
i am happy to use Jquery or Javascript if needed but full css would be good if possible
I think you can :focus
instead of :hover
like this update this code
or through js fiddle
#nav li:focus ul { position:absolute; display:block; z-index:9999; }
Let's suppose you want to change display strategies when you click
on your element. Let's suppose your element has a selector
. In that case, you can define this event with jQuery:
$(selector).click(function() {
if ($(this).hasClass("clicked")) {
$(this).removeClass("clicked");
} else {
$(this).addClass("clicked");
}
});
And you need to have some CSS for .clicked
as well. Let us suppose your selector is #foo
. Then you need rules like this:
#foo {
/*Add some stuff*/
}
#foo.clicked {
/*Add some stuff*/
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.