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