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
Valora esta entrada
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!

Entradas relacionadas:

Ejemplo de centrado horizontal de una caja con CSS
- 445
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
Unidades de medida absolutas y relativas en CSS
- 324
¿Como se define el tamaño de cada uno de los elementos de una página web? En CSS podemos encontrar medidas absolutas y relativas. Veamos a que equivale cada una.
Sintaxis CSS básica. Cómo se escribe el CSS.
- 248
Escribir CSS es fácil. Es un lenguaje que no tiene sorpresas. En esta entrada se explica como se escribe una instrucción CSS.
Resumen de como comentar código en html, css y javascript
- 584
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Modelo de cajas CSS. Ancho, altura, relleno, borde y margen
- 445
El modelo de cajas nos permite definir mediante CSS las propiedades físicas de espacio a una etiqueta html que esté dentro del body. En esta publicación se habla del ancho, altura, relleno, borde y fo...
Posicionamiento flotante de cajas. float: left | right | both; y propiedad clear
- 228
Apuntes de alumno y ejemplos de como usar la propiedad float y clear. Esta publicación forma parte del "tutorial css - apuntes de clase"
Maquetar una página de prestashop 1.6 con bootstrap
- 482
Maquetar páginas en Prestashop 1.6 con tablas es un deporte de riesgo para implementadores anclados en el pasado. En esta entrada te muestro un ejemplo sencillo y sin demasiadas complicaciones para qu...
Elementos en línea. Elementos bloque. Elementos inline-block.
- 439
Hemos aprendido como se define el margen, el borde, el relleno y el ancho y la altura. Nos queda pendiente ver como se relacionan estas cajas html entre ellas. Si se apilan. Si se ponen una al lado de...
Diferencia entre visibility:hidden; y display:none;
- 153
Código css para ilustrar la diferencia entre el uso de visibility:hidden; y display:none; . Incluye ejemplo visual.
Guía rápida para crear botones personalizados con CSS
- 104
Hacemos un repaso rápido a :hover :active y las propiedades box-shadow, border-radius, cursor y background para estilizar botones.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.