Hola gente de Foros del Web, espero puedan ayudarme en algo de CSS que aún no entiendo, veamos.
Tengo una barra de menú y un elemento de ahí es despegable, cuando pongo el cursor encima de ese elemento, se cambia de color y salen los submenús, pero ahora muevo el cursor encima de un submenú y se desactiva el elemento ":hover" del menú, y se desactiva el cambio del color del menú.
Si no se entendió aquí dejo las dos imágenes de lo que pasa:
Ahí tengo el cursor arriba del menú.
Y acá el mouse sobre un submenú y se desactiva el hover del menú.
Estoy intentando hacer que se quede activo pero no lo logro. El siguiente es mi código html del menú:
Código:
<ul class="navMenu" style="float: right;">
<a href="index.html"><li class="select">INICIO</li></a>
<a href="portafolio.html"><li>PORTAFOLIO</li></a>
<li><a href="#">PAQUETES</a>
<ul>
<li><a href="#">PAQUETE SILVER</a></li>
<li><a href="#">PAQUETE GOLD</a></li>
<li><a href="#">PAQUETE PREMIUM</a></li>
</ul>
</li>
<a href="#"><li>CONTACTO</li></a>
</ul>
Intenté el siguiente código pero no me dio resultado alguno:
Código:
#menu > ul > li > ul > li > a:hover ~ #menu > ul > li > a
{
background-color: #02b1f4;
color: #FFF;
border-radius: 0px;
}
Tenía entendido que si paso el cursor por "#menu > ul > li > ul > li > a:hover" entonces a "#menu > ul > li > a" le iba a modificar el estilo puesto. Pero creo que no xD.
Si es posible que me ayuden porfavor sería de mucha ayuda, saludos!