Ejemplo de menú vertical con submenú horizontal mediante CSS

En esta lectura vamos a crear un menú vertical con un submenú horizontal cuando se desplace el ratón por encima de un elemento <li> que anide una lista.

Previa a esta lectura es interesante leer como crear un menú horizontal con menú desplegable vertical.

El código html usado es el siguiente:

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

    li a{
    text-decoration:none;
    display:block;
    padding:5px 10px;
    width:120px;
    border:1px solid #000;
    color:#fff;
    background-color:#000;
    }
            
    li a:hover{
    color:#000;
    background-color:#fff;
    }
            
    li>ul{
    display:none;
    position:absolute;
    top:0px;
    left:120px;
    }
    
    li:hover>ul{
    display:block;
    }
            
    li > ul >li{
    float:left;
    }

¡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?

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