How To Create Dropdown Menu In Html

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.

ecommerce website Designer Junkie Apparel has a dropdown menu to display all its product categories

In this post, we'll walk through how to make a dropdown menu using HTML so you can incorporate it into your website designs.

Download Now: Free Intro Guide to HTML & CSS

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:

                                          
<option value="rigatoni">Rigatoni</option>
<option value="dave">Dave</option>
<option value="pumpernickel">Pumpernickel</option>
<option value="reeses">Reeses</option>

Here's the HTML all together and the result:

See the Pen HTML-only Dropdown by Christina Perricone (@hubspot) on CodePen.

HTML Dropdown Default Value

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.

See the Pen HTML-only Dropdown with boolean attribute by Christina Perricone (@hubspot) on CodePen.

How to Make a Hoverable Dropdown Menu

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.

Here's the HTML:

                                          
<div class="dropdown">
</div>

Here's the CSS:

                                          
.dropdown {
  display: inline-block;
  position: relative;
}

Step 2: Create the hoverable element.

Next, create an element that will reveal the dropdown list when a user hovers over it. For this example, we'll create a button. Then, place it inside the div.

Here's the HTML so far:

                                          
<div class="dropdown">
<button>HubSpot Resources</button>
</div>

Step 3: Create and style the dropdown content.

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

Here's the HTML for the dropdown content:

                                          
<div class="dropdown-content">
<a href="https://blog.hubspot.com/">Blog</a>
<a href="https://academy.hubspot.com/">Academy</a>
<a href="https://www.youtube.com/user/hubspot">YouTube</a>
</div>

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.

Here's the CSS:

                                          
.dropdown-content {
display: none;
position: absolute;
width: 100%;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

Step 4: Set the dropdown menu's hover state.

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.

Here's the CSS:

                                          
.dropdown:hover .dropdown-content {
display: block;
}

Step 5: Style the links inside the dropdown menu.

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 the CSS:

                                          
.dropdown-content a {
display: block;
color: #000000;
padding: 5px;
text-decoration: none;
}

Step 6: Change the color of dropdown links on hover.

You can also style the links to appear differently on hover using the pseudo-class ":hover." Say, you want the text and background color of a link to change when a user hovers over it.

Here's the CSS:

                                          
.dropdown-content a:hover {
color: #FFFFFF;
background-color: #00A4BD;
}

Here's the code all together and the result:

See the Pen Hoverable Dropdown Menu with Links by Christina Perricone (@hubspot) on CodePen.

Multiselect Dropdown

In the examples above, users could only select one option from the dropdown menu. You can create a menu that allows users to select multiple options. This is called a multiselect dropdown. To create a multiselect dropdown, you will need HTML, CSS, and Javascript.

Here's an example created by game and app developer Charlie Walter. Notice that he uses a form element.

See the Pen Multiselect (dropdown) by Charlie Walter (@cjonasw) on CodePen.

What's Next in Coding Dropdown Menus

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.

To learn about the fundamentals of drop-down menu accessibility, check out How to Create Drop-Down and Fly-Out Menus That Are Web-Accessible.

New Call-to-action

css introduction

Originally published Jun 8, 2021 7:00:00 AM, updated October 08 2021