MENU HOVER se desactiva al entrar al submenu

[Abeluchox]

Buenas amigos, tengo este mismo problema pero con otro efecto hover. El post similar [URL="http://www.forosdelweb.com/f53/dejar-elemento-hover-activo-1131753/"]http://www.forosdelweb.com/f53/dejar-elemento-hover-activo-1131753/[/URL]

Bueno el detalle es que cuando quito el puntero del mouse sobre el MENU y paso al submenu se desactiva el efecto hover...

Asi tengo el codigo HTML

Código HTML:

</div>
	 <header>
		<nav>
			<ul>
				<li><a href="#"><span class="primero"><i class="icon icon-home"></i></span>Nuestra Compañia</a>
					<ul>	
                        <li><a href="#">Quienes Somos</a></li>
						<li><a href="#">Videos Corporativos</a></li>
						<li><a href="#">Mision, Vision, Valores</a></li>
						<li><a href="#">Comite de Direccion</a></li>
						<li><a href="#">Localizacion</a></li>
                        <li><a href="#">Historia</a></li>
                        <li><a href="#">Estructura de la Compañia</a></li>
                    </ul>
				</li>
                <li><a href="#"><span class="primero"><i class="icon icon-stats-dots"></i></span>Segmento de Negocios</a>
                <ul>
						<li><a href="#">Fabricacion de Estructuras Metálicas</a></li>
						<li><a href="#">Montaje Industrial</a></li>
						<li><a href="#">Preparación de Superficies</a></li>
						<li><a href="#">Mantenimiento Hidroeléctrico </a></li>
						<li><a href="#">Servicio a Plantas Briqueteadoras</a></li>
					</ul>
				</li>
                <li><a href="#"><span class="primero"><i class="icon icon-users"></i></span>RSC</a>
                <ul>
						<li><a href="#">Codigo Etico</a></li>
						<li><a href="#">Certificaciones</a></li>
						<li><a href="#">Seguridad y Salud</a></li>
						<li><a href="#">Medio Ambiente</a></li>
						<li><a href="#">Investigacion y Desarrollo</a></li>
					</ul>
				</li>
				<li><a href="#"><span class="segundo"><i class="icon icon-tag"></i></span>Categorias</a>
					<ul>
						<li><a href="#">Item #1</a></li>
						<li><a href="#">Item #2</a></li>
						<li><a href="#">Item #3</a></li>
						<li><a href="#">Item #4</a></li>
						<li><a href="#">Item #5</a></li>
					</ul>
				</li>
				<li><a href="#"><span class="tercero"><i class="icon icon-suitcase"></i></span>Servicios</a>
                <ul>
						<li><a href="#">Item #1</a></li>
						<li><a href="#">Item #2</a></li>
						<li><a href="#">Item #3</a></li>
						<li><a href="#">Item #4</a></li>
						<li><a href="#">Item #5</a></li>
					</ul>
				</li>
				<li><a href="#"><span class="cuarto"><i class="icon icon-text"></i></span>Acerca de</a>
                <ul>
						<li><a href="#">Item #1</a></li>
						<li><a href="#">Item #2</a></li>
						<li><a href="#">Item #3</a></li>
						<li><a href="#">Item #4</a></li>
						<li><a href="#">Item #5</a></li>
					</ul>
				</li>
				<li><a href="#"><span class="quinto"><i class="icon icon-mail"></i></span>Contacto</a></li>
			</ul>
		</nav>
	</header>
	  </div> 

y asi el codigo CCS

Código HTML:

* {
	margin:0;
	padding:0;
}

header {
	margin:auto;
	margin-top:10px;
	font-family:Arial, Helvetica, sans-serif;
	width: 100%;
    overflow: hidden;
    height: 55px;
    position: relative;
}

nav {
	font-size:12px;
	top:-10px;
    position: absolute;
    /*left:0;
    right:0;*/
	margin:10px auto;
	max-width:1000px;
	width:100%;
}

nav ul {
	list-style:none;
}

nav > ul {
	display:table;
	width:100%;
	background:#000;
	min-width:140px;
	position:relative;
}

nav > ul li {
	display:table-cell;
	
}

/*Sub-menu*/
nav > ul > li:hover > ul {
	display:block;
	height:100%;
}



nav > ul > li > ul {
	display:block;
	position:absolute;
	background:#fff;
	left:0;
	right:0;
	overflow:hidden;
	height:0%;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

nav > ul li a {
	color: #fff;
	display: block;
	line-height: 10px;
	padding: 10px;
	position: relative;
	text-align: center;
	text-decoration: none;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
	background-color: #000033;
}

nav > ul > li > ul > li a:hover {
	background:#06F;
}

nav > ul > li > a span {
	background: #fff;
	display: block;
	height: 100%;
	width: 100%;
	left: 0;
	position: absolute;
	top: -25px;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
	background-color: #003399;
}

nav > ul > li > a span .icon {
	line-height:30px;
}

nav > ul > li > a:hover > span {
	top:0;
}

Estoy que me rompo el craneo...

[fede5426]

Para que mantenga el efecto cuando posiciones el cursor sobre el submenu, tenes que aplicar el efecto hover al elemento li que contiene el submenu en lugar del enlace..

Si el hover lo tiene el enlace, al posicionarte sobre el submenu estas quitando el cursor de dicho enlace.. en cambio si el hover lo tiene el item de lista, cuando te posicionas sobre el submenu seguís estando en el item de lista por lo que el hover se mantiene.

Entonces yo te diria que en lugar de usar "nav > ul > li > a:hover" para darle estilos al enlace, pruebes con hacerlo asi: "nav > ul > li:hover > a"

De esa forma el que tiene el hover es el item de lista y va a mantener los estilos que hayas aplicado mientras posiciones el cursor en el submenu.

Saludos

PD: Un detalle.. el submenu de "quienes somos" no tiene las etiquetas <ul></ul>

[Abeluchox]

Brother....jaja! gracias por la doble respuesta..pero igual cambie el codigo y nada! pudieras incluir completo ?

Por favor.....

[AngelKrak]

amigo, yo veo bien todo, podrias decirme cual es el error exactamente? si puedes manda imagen para saber mejor ;)

http://codepen.io/AngelKrak/pen/ZGPqWE

[fede5426]

Es el último el que tenés que cambiar..

Código CSS:

/* esto */
nav > ul > li > a:hover > span {
    top:0;
}
 
/* por esto */
nav > ul > li:hover > a > span {
    top:0;
}