How to Create an HTML Dropdown Menu [+ Examples]

Learn more from HubSpot's introductory guide to HTML & CSS.

Get Free HTML Introductory Guide
Anna Fitzgerald
Anna Fitzgerald

Published:

When building web pages, you have limited real estate to display all your content. To maximize space, you can use dropdown menus.

Junior developer creating HTML dropdown menu

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.

Download Now: Free HTML & CSS Hacks

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.

HTML Dropdown Menu

A drop-down menu is a list of options that is revealed only when a user interacts with the menu, either by clicking it or hovering over it with their cursor. The menu options then descend vertically and disappear again once the user disengages from the menu.

Since dropdown menus allow you to place more content and links on a page without cluttering it, they’re commonly used on websites and web applications to hide items that users might not need to see after the initial page load, but still might want to use.

Common use cases for HTML dropdowns include:

  • navigation menus that contain links to other pages on a website
  • web forms (including mobile-first Bootstrap forms) that list options from which the user may choose one
  • site searches for listing sorting or filtering options for a query
  • as an alternative to radio buttons that saves page space
  • listing out additional, less common actions a user can take inside an application — here’s an example from the HubSpot blog tool:

example of an html dropdown in the hubspot marketing tool

Dropdown menus contain several moving parts that all need to work together for a seamless user experience. If your dropdown doesn’t work as expected, users can become easily annoyed. That’s why it’s so important to implement them correctly in HTML.

HTML Dropdown Menu Syntax

To understand how dropdown menus work in HTML, you’ll need to know three elements: label, select, and option. Let’s look at each of these in more detail.

label

The <label> ag creates a label for a menu or other user input on the page. In order to associate the label with a dropdown, the for attribute is used and shares its value with the id attribute of the following <select> tag.

When a <label> is associated with a <select> tag in this way, clicking the label element will automatically place focus on the select element.

select

The <select> element creates the dropdown menu. It contains two attributes, name and id. The id attribute should have the same values as the for attribute in the <label> tag. The name attribute is used to identify the dropdown if the selection is being submitted in a form.

The <select> tag also takes several optional attributes. These are:

  • autofocus: Specifies that the dropdown should have input focus (i.e., it’s selected by the browser and can be controlled by the keyboard) when the page loads.
  • disabled: Disables the dropdown menu.
  • multiple: Allows multiple options to be chosen.
  • required: When included in a form, makes the form required in order to submit the form.
  • size: sets the number of options that are visible in the dropdown.

option

<select> contains one or more <option> tags nested inside it. Each <option> tag represents one menu item. The opening tag should contain the value attribute, which specifies a value that is submitted when that menu item is selected.

You can also use the optional attributes disabled, which disables the option in the menu, or selected, which automatically selects the option on page load.

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 to your HTML document. 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 to dog-names. Here’s what your HTML might look like:

 

<label for="dog-names">Choose a dog name:</label>

Step 2: Create a select element.

Next, add a <select> element after the <label> element. In the opening tag, add a name and an id attribute. Set the id attribute to the same value as the for attribute in the <label> tag, and set the name attribute to a value that identifies the menu when submitted in the form (it can be the same as your id value).

For this example, I’ll set both the name and id attributes to dogs. Here’s the HTML:

 

<select name="dog-names" id="dog-names"></select>

Featured Resource

An Introduction to HTML for Marketers and Developers

Fill out the form to access your free guide.

Step 3: Create option elements and place them inside the select element.

Finally, you’ll add <option> tags 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 result:

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

HTML Dropdown Default Value

When you create a dropdown menu this way, the first option listed in the HTML will be the default value of the dropdown, as you can see in the example above.

To change the default value, use the selected boolean attribute. Simply add it to the opening tag of the <option> tag 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 HubSpot (@hubspot) on CodePen.

How to Make a Hoverable Dropdown Menu

If you’d like a dropdown menu to appear when a user hovers over an element, 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, create a div and add the class dropdown to it. 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. Place the button 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 dropdown menu. Each of the links will be wrapped in a div with the class name dropdown-content.

Here’s the HTML for the dropdown content:

 

<div class="dropdown-content">

    <a rel="noopener" target="_blank" href="https://blog.hubspot.com/">Blog</a>

    <a rel="noopener" target="_blank" href="https://academy.hubspot.com/">Academy</a>

    <a rel="noopener" target="_blank" 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 directly 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 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 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 HubSpot (@hubspot) on CodePen.

Multiselect Dropdown

In the examples above, users could only select one option from the dropdown menu. However, you can also 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.

HTML Dropdown Accessibility

There’s another aspect of your dropdowns that we haven’t mentioned yet, but is essential to consider: accessibility. Web accessibility is the principle that all online experiences should be usable by anyone, with special attention paid to users with physical, visual, and cognitive disabilities, impairments, and limitations.

Dropdown menus must be accessible so that these users can browse your site, submit forms, and perform other actions the same as any other user. If not, they may take longer to find what they need or miss parts of your website altogether.

When designing a dropdown menu in HTML, here are a few accessibility best practices to keep in mind:

  • Avoid too many levels in your dropdown, as this makes it harder for users with motor issues to navigate the menu. If your menu includes more than one level of submenu (i.e. a menu within a menu within your main menu), there’s probably a better way to structure your menu or your website.
  • All menus on your side, including dropdowns, must be navigable via the tab key and the enter key. Tab moves forward through the menu items, and enter opens/closes the menu.
  • Be wary of keyboard traps. These occur when the user can tab through the items of a menu, but cannot “tab out” of the menu and is thus stuck in a loop.
  • For hover-activated menus, add a time delay (around a second) between when the cursor hovers off the menu and the menu closes. This helps users without fine motor control stay engaged with the menu if they accidentally disengage.
  • Using semantic HTML whenever possible not only makes your code easier to understand, but it also makes your menus accessible to screen readers.

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

Easily create dropdowns in HTML.

With a bit of HTML and CSS, it’s easy to create dropdown menus for your website that are easy, intuitive, and visually appealing.

You can set your dropdown to trigger with a click or mouse hover event — either way, you save valuable page space for very little interaction cost, which is why dropdown menus have been and continue to be a staple of web design.

Editor's note: This post was originally published in June 2021 and has been updated for comprehensiveness.

New Call-to-action

 

Topics: HTML

Related Articles

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Learn more about HTML and CSS and how to use them to improve your website.