How do i create a nested dropdown menu in html?

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

How do i create a nested dropdown menu in html?

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.

How do i create a nested dropdown menu in html?

How do i create a nested dropdown menu in html?

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

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:

How do i create a nested dropdown menu in html?

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.

How to Make a Dropdown Menu in HTML

  • Step 1: Add a <label> element to your HTML document. This will be the name of your dropdown menu.
  • Step 2: Add a <select> element. This creates the dropdown menu itself.
  • Step 3: Create <option> elements and place them inside the <select> element. These are the list items that will appear in the dropdown menu.
  • Step 4: Add a default value from the dropdown list, if desired.

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>

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;

}

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;

}

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.

How do i create a nested dropdown menu in html?

How do I create a nested dropdown menu?

Tap Navigation..
Click the name of your main menu..
Choose one of the menu items to be the header for your drop-down menu, or add a new menu item to be the header. ... .
Add menu items to include in the new drop-down menu. ... .
Click and drag the menu items to nest below the header item..
Click Save menu..

How do I create a sub drop

Create A Subnav Use any element to open the subnav/dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the subnav menu and add the subnav links inside it. Wrap a <div> element around the button and the <div> to position the subnav menu correctly with CSS.

How do I make a mega dropdown menu?

Use a container element (like <div class="dropdown-content">) to create the dropdown menu and add a grid (columns) and add dropdown links inside the grid. Wrap a <div class="dropdown"> element around the button and the container element (<div class="dropdown-content"> to position the dropdown menu correctly with CSS.

What is a nested menu?

A nested menu item is a menu item with a submenu.