Ejemplo de menú vertical con submenú desplegable vertical (CSS)

Ejemplo de menú vertical con submenú desplegable vertical (CSS)

Print Friendly, PDF & Email
Ejemplo de menú vertical con submenú desplegable vertical (CSS)
4.5 (90%) 2 votos

En esta lectura vamos a crear un menú vertical con un submenú desplegable vertical cuando se desplace el ratón por encima de un elemento <li> que esté anidando un elemento <ul>.

Esta lectura es una variante de esta otra. Las dos son muy similares.

El código html usado es el siguiente:

menú desplegable vertical en menú vertical
<nav>
        <ul>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Quiénes somos</a></li>
            <li><a href="#">Servicios</a><ul>
                <li><a href="#">Servicio A</a></li>
                <li><a href="#">Servicio B</a></li>
                <li><a href="#">Servicio C</a></li>
            </ul></li>
            <li><a href="#">Contacto</a></li>
        </ul>
</nav>

Código CSS usado

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    }
                  
    li{
    list-style-type:none;
    position:relative;
    width:120px;
    }
                
    li a{
    text-decoration:none;
    display:inline-block;
    padding:5px 10px;
    width:120px;
    height:30px;
    border:1px solid #000;
    color:#fff;
    background-color:#000;
    }
            
    li a:hover{
    color:#000;
    background-color:#fff;
                
    }
    
    nav li ul{
        display:none;
        position:absolute;
        top:0px;
        left:120px;
    }
            
    nav li:hover ul{display:block;}

Fijaros que al submenú le damos un posicionamiento absoluto y lo desplazamos hacia la derecha justamente 120px. 120px es el ancho que hemos dado a los elementos <li>.

Esto lo hacemos así porqué de no hacerlo el efecto hover producte un efecto que también desplaza a la pestaña de nombre contacto.

El resto del código es muy similar al de esta publicación.

¡Hola!

Querido lector,

Ahora sólo faltaría implementarlo en una página web.

Puedes descargar el código en este enlace.

¿Te animas a hacer un menú vertical con submenú vertical pero en este caso con javascript? Encontrarás la solución en el tutorial javascript.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.