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...