When building out web pages, you have limited real estate to display all your content. To maximize space, you can use dropdown menus.
The ecommerce website Designer Junkie Apparel uses a dropdown menu to display all its product categories, for example. That way, visitors can either shop the whole collection or hover over the menu and click one of the options to narrow down to the products they’re most interested in.
In this post, we’ll walk through how to make a dropdown menu using HTML so you can incorporate it into your website designs.
HTML Dropdown Menu
A drop-down menu is a list of options that is only revealed when a user interacts with the menu — either by clicking or hovering over it. The options then descend vertically, or “drop down,” and disappear again once the user disengages with the menu.
Since a dropdown menu allows you to place more content on a page without cluttering it, it’s commonly used in website navigation and forms. Let’s walk through how to create a basic and hoverable dropdown in HTML below.
How to Make a Dropdown Menu in HTML
It’s easy to create a basic dropdown menu in HTML with the <select> element. Let’s break the process down step by step below.
Step 1: Create a label element.
To start, add a <label> element. In the opening tag, add a for attribute with a shorthand name for the dropdown list. For example, if the dropdown contains a list of dog names, then you could set the attribute equal to “dog-nams.” Here’s what your HTML might look like so far:
<label for="dog-names">Choose a dog name:</label>
Step 2: Create a select element.
Next, add a <select> element. In the opening tag, add a name and ID attribute and set both to the same value as the for attribute in the previous step.
So, for this example, you’d set the name and ID attributes to “dogs.” Here’s the HTML:
<select name="dog-names" id="dog-names"></select>
The name attribute is required for any data from the dropdown menu to be submitted.
The id attribute, on the other hand, is required to associate the dropdown list with a label.
Step 3: Create option elements and place them inside the select element.
Finally, you’ll add option elements between the opening and closing tags of the select element. Add as many options as you want to provide in the dropdown list. Then, add a value attribute within each opening <option> tag and set it to the option name. Here are four examples:
The first option will be listed as the default value of the dropdown menu, as you can see in the example above. However, to change the default value, you can use the “selected” boolean attribute. Simply add it to the opening tag of the option element you want to display as the default, after its value attribute.
In the example below, you’ll see a dropdown menu for membership plans. While the options include a free and bronze plan, the boolean attribute is used to set the default value to silver.
If you’d like a dropdown menu to only appear when a user hovers over an element, then you’ll need to use HTML and CSS. Let’s look at the process below.
Step 1: Create and style a div with a class name “dropdown.”
First, you’ll need to create a div and add a class attribute. Set this class attribute to “dropdown.” Then, in CSS, set this div’s display to “inline-block” and position to “relative.” This will allow the dropdown content to appear right below the dropdown button.
Now it’s time to create the actual dropdown content, which will be hidden until the user hovers over the button. For the example below, we’ll include three links in the drop down menu. Each of the links will be wrapped in a div with the classname “dropdown-content.”
In CSS, set this div’s display to “none,” its position to “absolute,” and its width to 100%. This will ensure the dropdown content appears right below the dropdown button and is the same width as the button. Also, set the overflow property to “auto” to enable scroll on small screens. Finally, the box-shadow property is defined to make the dropdown content stand out against the background.
To ensure the dropdown content actually shows on hover, you need to specify the div’s display property with the pseudo-class “:hover.” This defines a special state of the element — in this case, how it appears when a user is hovering over it.
Without any styling, the links inside the dropdown menu would be bright blue and underlined, with no spacing in between. To make them look better, let’s set the font color to black, the padding property to 5px, and the text decoration property to “none.”
Here’s an example created by game and app developer Charlie Walter. Notice that he uses a form element.
Now that you know how to create some different types of dropdown menus, you’re ready to move onto the next stage: web accessibility. Dropdown menus must be accessible so that all visitors — including those with disabilities — can browse your site, submit forms, and so on.