Dropdown menus in HTML and CSS

Web Design with HTML & CSS

🕑 This lesson will take about 10 minutes

In this lesson, you will learn how to create a drop-down menu for your website using HTML and CSS code. The drop-down menu will look like the example, but you can personalise it as you like.

To create a drop-down menu using the method shown in this lesson, you will need to create a div that contains a button as well as another div which contains the drop-down menu. The drop-down menu will be hidden until the mouse cursor hovers over the main button.

Step 1 – HTML code

Create a new HTML file and copy the HTML code below.

  • Each drop-down menu button will be contained inside a div with a class name of ‘dropdown_div‘. The button will have a class name of ‘dropdown_button‘ and the actual drop-down menu will be inside a div called ‘dropdown_content‘.

Step 2 – CSS code

Create a new CSS file called ‘theme.css‘ and save it in the same folder as the HTML file. Copy the CSS code below and change the colours, font size and family properties, and other properties as you wish. Save your work.

Here is the full code and interactive example: