Subject: CSS drop down menus
I want to handle click events with CSS such that when a sub-item within a drop down menu is clicked that the drop menu stays visible.
... AND when I click a sub-item in a different drop down menu, I want the original drop down menu to disappear.
I can do all this with javascript, but that creates other problems not related to this post.
HTML snippet
<ul id="menubar"> <!-- #menubar + -->
<li class="drop">
text1
<ul class="aMenu"> <!-- drop-menu -->
<li>
text11
</li>
<li class="daddy"> <!-- .daddy = parent of sub-menu -->
text12
<!--
sub-menu = .daddy .aMenu
sub-menu item = .daddy .aMenu li
-->
<ul class="aMenu"> <!-- sub-menu -->
<li>text121</li>
<li>text122</li>
</ul>
</li> <!-- .daddy -->
</ul>
</li> <!-- drop menu item "text1" -->
</ul>
existing CSS:
/*
Show drop menu when over main menu and
show 1st sub-menu when over sub-menu's parent
*/
#menubar li:hover .aMenu {
left: auto;
}
/*
Hide sub-sub-menu when hovering over
its grandparent (li:hover) menu.
*/
#menubar li:hover .aMenu .aMenu {
left: -99999px;
}
/*
Show 1st sub-menu when hovering over
its parent (li:hover) .aMenu ...
... but, still keep hidden all its deeper
sub-sub menus from above.
*/
#menubar .aMenu li:hover > .aMenu {
left: auto;
}
existing JS:
I do have this function called within <body onload="sfHover()">
function sfHoverJQ() {
$(document).ready(function () {
$("li").on({
mouseenter: function(evt) {
$(this).addClass("sfhover");
},
mouseleave: function(evt) {
$(this).removeClass("sfhover");
$(this).removeClass("sfclick");
},
click: function(evt) {
$(this).removeClass("sfhover");
$(this).addClass("sfclick");
}
});
});
}
So I do have the sfclick + sfhover classes available, but I just don't know how to put it into the CSS code.