[SOLUCIONADO] Dejar elemento:hover activo

[GroX0r]

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!

[fede5426]

Antes que nada, está mal estructurado el menú.. el orden es ul > li > a, y si te fijas en algunos lo tenes asi ul > a > li

Código HTML:

<nav>
  <ul>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
</nav>
 

Ahora, tu problema está en que el hover está hecho en el enlace y no en el item de lista.

A ver si me puedo explicar, tenes un hover en el enlace.. hasta ahí todo perfecto, pasas el mouse y funciona.
Tu submenu está dentro del <li>, pero no dentro del enlace, por lo que si el cursor lo posicionas sobre el submenu, quitas el hover del elemento <a>.. en cambio si el hover estuviera aplicado al item de lista, al posicionar el cursor sobre el submenu, seguís estando sobre el item de lista y así se mantiene el hover.

Creo que se entiende, espero que te sirva.

Saludos

Edito:

Agrego 2 ejemplos para que lo veas funcionando..

Esto es lo que tenés vos:

http://codepen.io/fede5426/pen/rVJEep

Y así debería funcionar:

http://codepen.io/fede5426/pen/qdxzNJ

La desventaja es que el enlace no funcionaría clickeando en cualquier parte del elemento resaltado sino que solamente funciona clickeando el texto.

Otra forma que podés usar es con javascript indicar que al hacer hover en el submenu, el elemento <a> tome una clase .activo por ejemplo, y al quitar el mouse que se quite la clase..

Código CSS:

.activo{
    background-color:#02b1f4;
    color:#fff;
}
 

Código Javascript:

$(document).ready(function(){
    
    $(".submenu-paquetes").hover(
        
        function(){
            $(".paquetes").addClass("activo");
        },
        
        function(){
            $(".paquetes").removeClass("activo");   
        }
        );
 
});
 

Funcionando: http://codepen.io/fede5426/pen/BNYgLo

Otra forma no se me ocurre

Saludos!

[GroX0r]

¡Fenomenal amigo! Lo he entendido todo perfectamente :D, excelente explicación, muchas gracias :D, ya ha quedado perfectamente perfecto, válgame la redundancia jaja, muchas gracias por su explicación y tiempo, saludos!