Ejemplo de menú vertical con submenú horizontal mediante CSS

5
(1)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

Ejemplo de menú vertical con submenú horizontal mediante CSS 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!

  1. Avatar de HUMBERTO ALESSANDRO TORRES LOPEZ
    HUMBERTO ALESSANDRO TORRES LOPEZ

    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.

    1. Avatar de Francesc Ricart

      ¡Muchas gracias Humberto!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *