En este tutorial crearemos un menú superior desplegable haciendo uso de HTML y CSS sin necesidad de JavaScript.

En la creación de un sitio web, un menú superior es de uso común, dado que permite brindar al usuario un resumen de enlaces hacia nuestro contenido, ya sea agrupándolos en categorías o brindando enlaces directos a páginas importantes. Para ello, seguiremos una serie de pasos que detallamos a continuación:

Primero, crearemos nuestra estructura básica en HTML: dentro de nuestro elemento “body” crearemos un elemento “header”, el cual será una barra de navegación superior. Dentro colocaremos el elemento “nav” que contendrá el menú desplegable en forma de lista, esta lista “ul” tendrá como id “menu”. Como items de la lista tendremos “Inicio”, “Cursos”, “Tutoriales” y “Contacto”. El item “Cursos” contendrá una lista anidada con los items “Frontend”, “Backend” y “Mobile”, cada item contendrá su respectivo enlace:

See the Pen Cómo crear un menú desplegable con HTML y CSS sin JavaScript - Parte 1 by Devcode.la (@devcodela) on CodePen.

Luego, brindaremos estilos a nuestra lista: primero reseteamos los valores de margin y padding a todos nuestros elementos con el selector universal “*”, con esto nos aseguraremos que el padding izquierdo que trae por defecto el elemento “ul” no nos traiga problemas más adelante en nuestro diseño. 

Al elemento header le daremos un ancho de 480px, dado que más adelante cada uno de los 4 items superiores del menú encajará en un ancho de 120px. Además centramos este elemento horizontalmente y utilizaremos la familia de fuentes sans-serif, similar a la que usamos en la plataforma. A la lista “ul” le quitaremos los estilos de lista y definiremos los estilos de nuestros enlaces que irán dentro de nuestros items, estos enlaces, tendrán fondo gris, color de letra blanco, sin subrayado.

See the Pen Cómo crear un menú desplegable con HTML y CSS sin JavaScript - Parte 2 by Devcode.la (@devcodela) on CodePen.

Además, dispondremos nuestros enlaces principales de izquierda a derecha del menú, para esto, los convertiremos en bloques, le daremos un ancho mínimo de 100px que sumados a los padding de 10px del lado izquierdo y 10px del lado derecho dan un total de 120px. 

También utilizaremos la pseudoclase :hover para cambiar el color de fondo y letra cuando el mouse se ubique encima de nuestro enlace. Además, cada item principal tendrá el texto centrado y utilizaremos la propiedad float con el valor “left” para que los elemento se ubiquen de izquierda a derecha, quedando los items secundarios ubicados de arriba hacia abajo dado que no se ven afectados por la propiedad float. 

Hagamos la prueba pasando el mouse encima de los enlaces:

See the Pen Cómo crear un menú desplegable con HTML y CSS sin JavaScript - Parte 3 by Devcode.la (@devcodela) on CodePen.

Finalmente, trabajaremos nuestra lista secundaria utilizando la propiedad display con valor “none”, esto debido a que inicialmente no queremos que se muestre nuestra lista secundaria, sino que se muestre al momento de colocar el mouse encima del item principal. Para ello utilizamos la pseudoclase :hover, para cambiarle el valor a “block” y se muestre:

See the Pen Cómo crear un menú desplegable con HTML y CSS sin JavaScript - Parte 4 by Devcode.la (@devcodela) on CodePen.

Con esto hemos logrado desarrollar un menú desplegable sin hacer uso de JavaScript o alguna librería del mismo. Con la pseudoclase :hover podemos ayudarnos para mostrar u ocultar nuestras listas sencundarias y de esa manera hacer más sencilla la experiencia de nuestros usuarios con nuestro menú desplegable. Recuerda que tenemos un Curso de HTML y CSS disponible en nuestra plataforma donde podrás conocer más pseudoclases y aplicaciones de las mismas.