Asunto: menús desplegables de CSS
Quiero manejar eventos de clic con CSS de modo que cuando se haga clic en un subelemento dentro de un menú desplegable, el menú desplegable permanezca visible.
... Y cuando hago clic en un subelemento en un menú desplegable diferente, quiero que desaparezca el menú desplegable original.
Puedo hacer todo esto con javascript, pero eso crea otros problemas no relacionados con esta publicación.
fragmento de HTML
<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>CSS existente :
/* 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; }JS existente :
Tengo esta función llamada dentro de <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"); } }); }); } Así que tengo las clases sfclick + sfhover disponibles, pero no sé cómo ponerlas en el código CSS.