Question

Diseñe un menu desplegable con HTML5 y CSS en el cual utilizo la pseudoclase :hover para mostrar el otro bloque de la lista y asi dar del efecto de "despliegue" al pasar el mouse por encima, he probado el menu en mozilla firefox y funciona excelente, pero en google chome no me funciona a que se debe esto? debo utilizar javascript para realizar esta accion?
aqui les dejo el código.

<nav>
    <ul class="nav">
        <li><a href="#1" class="a"><span><i class="icon icon-home"></i></span>Inicio</a></li>
        <li><a href="#2" class="a"><span><i class="icon icon-suitcase"></i></span>Servicios</a>
            <ul>
                <li><a href="#2_1" class="a">Automatización <span><i class="icon-controller-play"></i></span></a></li>
                <li><a href="../LogoBitcom/index.html" class="a">Mantenimiento <span><i class="icon-cog"></i></span></a></li>
                <li><a href="#2_3" class="a">Redes <span><i class="icon-flow-tree"></i></span></a></li>
            </ul>
        </li>
        <li><a href="#3" class="a"><span><i class="icon icon-info"></i></span>Acerca de</a></li>
        <li><a href="#4" class="a"><span><i class="icon icon-mail"></i></span>Contacto</a></li>
    </ul>
</nav>

aqui el codigo en css:

*{
margin:0;
padding: 0;
 }
nav{
    margin:auto;
    width: 100%;
    max-width: 1000px;
    background: #fff;
}
nav > ul{
    list-style: none;
    background: #BB1521;  /*#CB0025*/ /*#BC0709*/
    display: table;
    overflow: hidden;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
}

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

.a {
    font-family: sans-serif;
    font-size: 20px;
    color: #fff;
    display: block;
    line-height: 20px;
    padding: 20px;
    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;
}

    /*sub menu*/

nav > ul > li > ul {
    display: none; /*visibility:hidden;*/
    background: #BB1521;
    position:absolute;
    list-style: none;
    width: 100%;
    max-width: 264px;
}
nav > ul > li:hover > ul{
    display: block; /*visibility:visible;*/
}
nav > ul > li > ul > li a:hover{
    background: #364680;
}
/*--------------------------*/
nav > ul > li > a span {
    background: #364680;  /*#174459*/
    display: block;
    height: 100%;
    width: 100%;
    left: 0;
    position: absolute;
    top:-54px;
    -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 span .icon {
    display:block;
    line-height:60px;
}

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

Answer 1

Hola @christiandp7.

no hace falta que uses JavaScript para esto: tu enfoque de CSS3, si bien requiere un browser moderno, está bien planteado.

En Crhome no te funciona igual que en Firefox por la interpretación de la posición relativa. Se soluciona haciendo este cambio:

nav > ul{
    list-style: none;
    background: #BB1521;  /*#CB0025*/ /*#BC0709*/
    display: table;
    overflow: hidden;
    width: 100%;
/*    position: relative;  <- esto es lo que falla en Chrome, pero si esto funciona en Firefox */
    margin-bottom: 20px;
}

Chrome está interpretando que como el UL que contiene todo es relativo, entonces es contenedor de los otros elementos, pero el UL desplegable sobresale del UL continente, y por tanto lo que sobresale no se muestra... delicias de la interoperabilidad ;-)

Saludos cordiales!

Answer 2

hice los siguientes cambios y me funciono en ambos exploradores, creo que el problema principal estaba en el overflow:hidden de nav > ul que evitaba que se visualizara el menú desplegable. Saludos

nav > ul{
    list-style: none;
    background: #BB1521;  /*#CB0025*/ /*#BC0709*/
    display: table;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
}
nav > ul > li {
    display: table-cell;
    position: relative;
}