1

Estaba tratando de crear un menú horizontal del que cuelga un submenú vertical y del que a su vez cuelga otro submenú vertical. El problema está en que al desplegar el primer sub-submenú (Opción 3.3) se queda congelado y no me permite seleccionar otras opciones del mismo nivel (Opción 3.4 y Opción 3.5).

    ul {
        display: inline-block;
        list-style: none;
    }
    
    nav > ul > li {
        float: left;
    }
    
    a {
        display: block;
        width: 12vw;
        height: 6vh;
        line-height: 6vh;
    }
    
    a:hover {
        background: grey;
    }
    
    li > ul {
        display: none;
        position: absolute;
    }
    
    ul ul > li ul li {
        position: relative;
        left: 12vw;
        top: -6vh;
    }
    
    li:hover > ul {
        display: block;
    }
<nav>
    <ul>
        <li>
            <a href="#">Opción 3</a>
            <ul>
                <li><a href="#">Opción 3.1</a></li>
                <li><a href="#">Opción 3.2</a></li>
                <li>
                        <a href="#">Opción 3.3</a>
                        <ul>
                            <li><a href="#">Opción 3.3.1</a></li>
                            <li><a href="#">Opción 3.3.2</a></li>
                            <li><a href="#">Opción 3.3.3</a></li>
                            <li><a href="#">Opción 3.3.4</a></li>
                            <li><a href="#">Opción 3.3.5</a></li>
                        </ul>
                </li>
                <li><a href="#">Opción 3.4</a></li>
                <li>
                    <a href="#">Opción 3.5</a>
                    <ul>
                        <li><a href="#">Opción 3.5.1</a></li>
                        <li><a href="#">Opción 3.5.2</a></li>
                        <li><a href="#">Opción 3.5.3</a></li>
                        <li><a href="#">Opción 3.5.4</a></li>
                        <li><a href="#">Opción 3.5.5</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

Es algo que realmente me resulta curioso puesto que un código CSS similar me ha funcionado cuando son todos los menús verticales.

¿Cuál es mi error?¿Cómo puedo solucionarlo?

Muchas gracias.

1 respuesta 1

2

De momento te veo 2 errores, el primero es que estás dando un width: 12vw; a los li, esto va a producir que al acortarce la pantalla se te va a ir el texto a dos lineas, lo de la tercera opción, estás dando un left: 12vw; al li, esto hace que se desplace el li, pero no el ul en si, por eso al mover el cursor, este no se posiciona sobre el ul y lo desaparece.

De igual forma te recomiendo que NO USES VW y VH para dar márgenes,tamaños y alto de linea a los contenedores y textos, ya que esto te generará probelams en pantallas pequeñas o muy largas, ya que este varía dependiendo del tamaño de la misma.

ul {
    display: inline-block;
    list-style: none;
}
li {
  position: relative; /* indispensable para posicionar los elementos hijos */
}
nav > ul > li {

}

a {
    display: block;
    width: 85px; /* elemento modificado */
    padding: 6px 0;  /*  modifícalo a tu gusto */
    /* height: 6vh; elemento eliminado, es contraproducente */
    /* line-height: 1.6;  elemento eliminado, se subsana con padding: */
}

a:hover {
    background: grey;
}

li > ul {
    display: none;
    position: absolute;
}
ul ul > li ul {
  padding-left: 10px; /* resetea padding del navegador */
  left: 85px; /* movido a contenedor padre y cambiado de vw a px */
  top: 0; /* posiciona el elemento a la altura indicada */

}
ul ul > li ul li {
    position: relative;
}

li:hover > ul {
    display: block;
}
<nav>
    <ul>
        <li>
            <a href="#">Opción 3</a>
            <ul>
                <li><a href="#">Opción 3.1</a></li>
                <li><a href="#">Opción 3.2</a></li>
                <li>
                        <a href="#">Opción 3.3</a>
                        <ul>
                            <li><a href="#">Opción 3.3.1</a></li>
                            <li><a href="#">Opción 3.3.2</a></li>
                            <li><a href="#">Opción 3.3.3</a></li>
                            <li><a href="#">Opción 3.3.4</a></li>
                            <li><a href="#">Opción 3.3.5</a></li>
                        </ul>
                </li>
                <li><a href="#">Opción 3.4</a></li>
                <li>
                    <a href="#">Opción 3.5</a>
                    <ul>
                        <li><a href="#">Opción 3.5.1</a></li>
                        <li><a href="#">Opción 3.5.2</a></li>
                        <li><a href="#">Opción 3.5.3</a></li>
                        <li><a href="#">Opción 3.5.4</a></li>
                        <li><a href="#">Opción 3.5.5</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.