entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Menu desplegable no funciona en Chrome

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;
}

2 Respuestas

2votos

Leonardo-Tadei Puntos227020

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!

0voto

christiandp7 comentado

ciertamente el error estaba en la posisión relativa en el UL conteniente, al quitarle me funcionó de maravilla.
Agradesco mucho su ayuda, saludos colegas!!!

1voto

jonatancastro1 Puntos3110

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;
}

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta