Creación de un menú horizontal con sub menú desplegable mediante CSS

Creación de un menú horizontal con sub menú desplegable mediante CSS

Print Friendly, PDF & Email
Creación de un menú horizontal con sub menú desplegable mediante CSS
5 (100%) 1 voto

Esta publicación es una continuación de un anterior ejemplo de creación de un menú horizontal con CSS.

Las siguientes lecturas te pueden resultar de interés:

  1. Ejemplo de creación de un menú horizontal con CSS
  2. Diferencia entre display y visibility
  3. Propiedad :hover

El resultado que queremos obtener es algo parecido a la imagen siguiente:

código menú desplegable

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 1</a></li>
            <li><a href="">Servicio 2</a></li>
            <li><a href="">Servicio 3</a></li>
            <li><a href=""></a>Servicio 4</li></ul>
            </li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contacto</a></li>
    </ul></nav>

Estrategia mediante inline-block

*{margin:0;padding:0;box-sizing:border-box;font-size:0;}  
nav a{
      text-decoration:none;
      color:inherit;
      font-size:14px;
      }
            
nav li{
      display:inline-block;
      width:150px;
      height:30px;
      padding:5px 10px;
      background-color:#000;
      border:1px solid #000;
      text-align:center;
      color:#fff;
      position:relative;
}
            
nav li:hover{
      background-color:#fff;
      color:#000;
      }
            
nav li>ul{
      display:none;
      }

nav li:hover>ul{
      display:block;
      position:absolute;
      top:30px;
      left:0px;
}

Sería muy interesante que en tu navegador tengas abiertas 2 ventanas.

En la primera esta lectura. En la segunda el ejemplo de menú horizontal para poder comparar el código. Hay muchas similitudes pero algunas diferencias importantes.

Por ejemplo:

  • El ancho de los elementos <li> en la resolución que presento ya no se define en porcentajes. Esto es así porqué en sub menú tomaría como referencia una medida pequeña y lo que queremos es que los elementos inline-block se apilen unos debajo de otros.
  • Los elementos <li> tienen ahora un posicionamiento relativo. De este modo podremos trabajar el sub menú mediante posicionamiento absoluto.

Fijaros en los selectores nav li>ulnav li:hover>ul.

El primero indica aquellos elementos ul directamente después de un li. Esto es el sub menú al que se le da la propiedad display:none.

Sin embargo cuando pasamos el ratón por encima de cualquier <li> que directamente después tenga un <ul>, que el <ul> pase a ser de tipo display:block o inline-block.

Finalmente el elemento <ul> contenido dentro de un li pasa a mostrarse pero debemos darle un posicionamiento absoluto referenciado respecto de su <li>. Exactamente deberemos desplazarlo la altura del elemento <li>. Puesto que en los estilos genéricos del documento le hemos dado la propiedad box-sizing:border-box; sabemos seguro que la altura es la que indiquemos con la propiedad height. En el caso del ejemplo exactamente 30px.

¡Hola!

Querido lector,

¿Te animas a hacer un menú vertical con un sub menú horizontal y después repetirlo con un sub menú vertical ?

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