---
title: How to Create a Dropdown Menu with CSS and JavaScript
---
## How to Create a Dropdown Menu with CSS and JavaScript
In this tutorial you will learn how to create a simple dropdown menu with vanilla Javascript, HTML and CSS. We will walk through the HTML, CSS and Javascript code, but paying more attention to the programming, since this is a JS tutorial. We'll use just plain JS and CSS, with no frameworks or preprocessors. The only (kind-of) exception will be importing the [Font Awesome](https://fontawesome.com/) CSS file because we'll use one of its icons.
This is targeted to developers that have an average understanding of HTML, CSS and JS. I tried to make it as clean as possible, but I won't focus too much on details here. I hope you all enjoy.
## Screenshots
This is how the code result looks like:
Initial screen:
Dropdown opened:
Dropdown with option selected:
#### HTML:
In this section, we will discuss the implementation of the HTML code for the demo page.
To start off, let's see the `` code
```html
Dropdown Example
```
This is basically HTML head boilerplate, with the exception of the `link` tags loading the two CSS stylesheets we will use in this tutorial: the Font Awesome styles, and the `styles.css` file, where we will define this page's styles.
Then, there's the rest of the HTML file, the body:
```html
Select an option
Option 1
Option 2
Option 3
Option 4
The result is:
```
This section can be divided into 3 main parts:
* The `.dropdown` div, where the dropdown element's structure will be defined.
* The `#result` element, that will contain the selected option by the user, from the dropdown element.
* The script written into the `
Dropdown opened:
Dropdown with option selected:
#### HTML:
In this section, we will discuss the implementation of the HTML code for the demo page.
To start off, let's see the `` code
```html