0

He creado un pequeño ejemplo para enseñaroslo haber si alguien puede ayudarme, mi problema es que tengo un menu nav con un li articulos el cual despliega un submenu, me gustaria que este apareciera progresivamente al hacer hover en articulos, el problema es que no se como hacer para mezclar display none y block con la propiedad opacity, si solo pongo la propiedad opacity y una transiccion de 2 segundos hace el efecto que quiero el problema esta en que necesito utilizar el display none porque sino los elementos del submenu son clickables aunque su opacidad sea 0, no creo que sea muy dificil hacerlo pero la verdad es que me esta dando un quebradero de cabeza, os dejo aqui el codigo.

introducir el código aquí

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>prueba opacity</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <nav id="navegador_izquierda" class="navegadores">
        <ul>
            <li>
                <a href="#">ACTUALIDAD</a>
            </li>

            <li>
                <a href="#">QUIENES SOMOS</a>
            </li>

            <li>
                <a href="#">EVENTOS</a>
            </li>

            <li>
                <a href="#">ARTICULOS</a>
                <ul id="desplegable_articulos">
                    <li><a href="#">Categoria 1</a></li>
                    <li><a href="#">Categoria 2</a></li>
                    <li><a href="#">Categoria 3</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
</html>



*{
    margin: 0px;
    padding: 0px;
}

nav{
    background: red;
}

nav > ul{
    list-style: none;
    position: relative;
}

nav > ul > li{
    display: inline-block;
}

nav > ul > li > ul{
    position: absolute;
    display: none;
    list-style: none;
    background: yellow;
    text-align: center;
    width: 150px;
    margin: 0px;
    margin-left: -20px;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 2s; 
}

nav > ul > li > ul > li{
    text-align: center;
    background: red;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

nav > ul > li > ul >li > a{
    text-decoration: none;
    text-align: center;
    color: white;
}

nav > ul > li:hover > ul{
    opacity: 1;
    display: block;
}
4
  • Aca te dejo un ejemplo de como hacerlo solo usando html y css Menú Desplegable
    – Roy
    Commented el 26 may. 2021 a las 14:41
  • el enlace me lleva a una pagina 404 de codepen
    – solnegro88
    Commented el 26 may. 2021 a las 14:48
  • codepen.io/epjuan21/pen/zxPmYx
    – Roy
    Commented el 26 may. 2021 a las 14:49
  • Muchas gracias Daniel
    – solnegro88
    Commented el 26 may. 2021 a las 14:50

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.