Dejar elemento:hover activo

[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!