Un menú desplegable es cuando tenemos elementos debajo de otros menús. Podemos decir que son «sub-menus» en la navegación de nuestro sitio. En este breve tutorial aprenderemos a crear un menú desplegable únicamente utilizando CSS.
Código HTML para nuestro menú
Lo primero que debemos hacer es escribir el código HTML para nuestro menú desplegable.
![](https://everydayweb.net/wp-content/uploads/2022/08/menu-desplegable-998x1024.jpeg)
Ahora que ya tenemos el código HTML para nuestro menú. Continuemos dando estilo a la parte superior de nuestro menú.
![](https://everydayweb.net/wp-content/uploads/2022/08/estilos-menu-2.jpeg)
Hasta ahora, tenemos un menú con cuatro elementos. Una de las cosas que hicimos con los estilos de ahora, fue ocultar los elementos hijo o «sub-menus». Se podría hacer utilizando display: none; también pero si queremos animar nuestro menú desplegable, es mejor establecer la opacidad en cero y ocultarlo para que no afecte el resto del sitio con la regla visibility.
![](https://everydayweb.net/wp-content/uploads/2022/08/menu-1.jpeg)
Ahora, agreguemos el siguiente estilo para que cuando el usuario coloque el mouse encima del elemento del menú, muestre el sub-menu. Esto lo hacemos con la pseudo clase :hover.
![](https://everydayweb.net/wp-content/uploads/2022/08/hover.png)
También es importante agregar un parámetro a nuestro elemento, este será transition. Esta regla establece que el elemento se anime cuando tenga cambios, en este caso, cambiará la opacidad de 0 a 1.
![](https://everydayweb.net/wp-content/uploads/2022/08/opacity.jpeg)
Una vez que agregamos estos dos parámetros, el resultado es este.
![](https://everydayweb.net/wp-content/uploads/2022/08/previo-menu-desplegable.gif)
Ahora ya tenemos nuestro menú desplegable. Solo debemos agregar estilos :hover para cuando el mouse pasa sobre todos los menús.
![](https://everydayweb.net/wp-content/uploads/2022/08/estilos-hover.jpeg)
Y listo, esto es un menú desplegable sencillo. Se pueden hacer muchas cosas más, dependerá de tu creatividad.
Aquí el resultado final.
![](https://everydayweb.net/wp-content/uploads/2022/08/menu-desplegable-final.gif)
Y aquí tenemos el código final.
See the Pen Dropdown menu with CSS by Jorge Flores (@jluisfg) on CodePen.