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