Ejemplo de menú vertical con submenú horizontal mediante CSS

Ejemplo de menú vertical con submenú horizontal mediante CSS 1

Ejemplo de menú vertical con submenú horizontal mediante CSS

5
(1)

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!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 5 / 5. Votos: 1

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

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

2 Comments
  • HUMBERTO ALESSANDRO TORRES LOPEZ
    Posted at 08:21h, 25 mayo Responder

    No copie tu ejemplo completamente ya que ya tenia algo, pero la simplicidad del mismo me resolvio lo que otros mas complejos no pudieron, gracias.

Post A Comment