---
title: How to Create a Dropdown Menu with CSS and JavaScript
localeTitle: Cómo crear un menú desplegable con CSS y JavaScript
---
## Cómo crear un menú desplegable con CSS y JavaScript
En este tutorial, aprenderá cómo crear un menú desplegable simple con Javascript, HTML y CSS de vainilla. Vamos a ver el código HTML, CSS y Javascript, pero prestando más atención a la programación, ya que este es un tutorial de JS. Usaremos solo JS y CSS, sin marcos ni preprocesadores. La única excepción (tipo de) será la importación del archivo CSS de [Font Awesome](https://fontawesome.com/) porque usaremos uno de sus íconos.
Está dirigido a desarrolladores que tienen un promedio de comprensión de HTML, CSS y JS. Traté de hacerlo lo más limpio posible, pero no me centraré demasiado en los detalles aquí. Espero que todos disfruten.
## Capturas de pantalla
Así es como se ve el resultado del código:
Pantalla inicial:
Desplegable abierto:
Desplegable con la opción seleccionada:
#### HTML:
En esta sección, discutiremos la implementación del código HTML para la página de demostración. Para empezar, veamos el código ``
```html
Dropdown Example
```
Básicamente es un encabezado HTML, con la excepción de las etiquetas de `link` cargan las dos hojas de estilo CSS que usaremos en este tutorial: los estilos de Font Awesome y el archivo `styles.css` , donde definiremos los estilos de esta página.
Luego, está el resto del archivo HTML, el cuerpo:
```html
Select an option
Option 1
Option 2
Option 3
Option 4
The result is:
```
Esta sección se puede dividir en 3 partes principales:
* El `.dropdown` div, donde se definirá la estructura del elemento desplegable.
* El elemento `#result` , que contendrá la opción seleccionada por el usuario, desde el elemento desplegable.
* El script escrito en la etiqueta `