---
title: How to Create a Dropdown Menu with CSS and JavaScript
localeTitle: Como criar um menu suspenso com CSS e JavaScript
---
## Como criar um menu suspenso com CSS e JavaScript
Neste tutorial, você aprenderá a criar um menu suspenso simples com JavaScript, HTML e CSS. Vamos percorrer o código HTML, CSS e Javascript, mas prestando mais atenção à programação, já que este é um tutorial do JS. Usaremos apenas JS e CSS simples, sem frameworks ou pré-processadores. A única (espécie de exceção) será importar o arquivo CSS do [Font Awesome](https://fontawesome.com/) porque usaremos um de seus ícones.
Isso é direcionado a desenvolvedores que têm um entendimento médio de HTML, CSS e JS. Tentei torná-lo o mais limpo possível, mas não vou me concentrar muito nos detalhes aqui. Espero que todos gostem.
## Screenshots
É assim que o resultado do código se parece:
Tela inicial:
Dropdown aberto:
Dropdown com a opção selecionada:
#### HTML:
Nesta seção, discutiremos a implementação do código HTML para a página de demonstração. Para começar, vamos ver o código ``
```html
Dropdown Example
```
Este é basicamente um texto padronizado em HTML, com a exceção das tags de `link` carregam as duas folhas de estilo CSS que usaremos neste tutorial: os estilos Font Awesome e o arquivo `styles.css` , onde definiremos os estilos desta página.
Então, há o resto do arquivo HTML, o corpo:
```html
Select an option
Option 1
Option 2
Option 3
Option 4
The result is:
```
Esta seção pode ser dividida em 3 partes principais:
* O `.dropdown` div, onde a estrutura do elemento dropdown será definida.
* O elemento `#result` , que conterá a opção selecionada pelo usuário, no elemento suspenso.
* O script escrito na tag `