---
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 `