Dropdownlist 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 theyre most interested in.

In this post, well walk through how to make a dropdown menu using HTMLso 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, its commonly used in website navigationand forms. Lets walk through how to create a basic and hoverable dropdown in HTML below.

How to Make a Dropdown Menu in HTML

Its easy to create a basic dropdown menu in HTML with the element. Lets break the process down step by step below.

Step 1: Create a label element.

To start, add a 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. Heres what your HTML might look like so far:

Choose a dog name:

Step 2: Create a select element.

Next, add a

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, youd set the name and ID attributes to dogs. Heres the HTML:

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, youll 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 tag and set it to the option name. Here are four examples:

Heres 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, youll 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 youd like a dropdown menu to only appear when a user hovers over an element, then youll need to use HTML and CSS. Lets look at the process below.

Step 1: Create and style a div with a class name dropdown.

First, youll need to create a div and add a class attribute. Set this class attribute to dropdown. Then, in CSS, set this divs display to inline-block and position to relative. This will allow the dropdown content to appear right below the dropdown button.

Heres the HTML:

Heres the CSS:

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, well create a button. Then, place it inside the div.

Heres the HTML so far:

Step 3: Create and style the dropdown content.

Now its time to create the actual dropdown content, which will be hidden until the user hovers over the button. For the example below, well include three links in the drop down menu. Each of the links will be wrapped in a div with the classname dropdown-content.

Heres the HTML for the dropdown content:

In CSS, set this divs 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.

Heres the CSS:

Step 4: Set the dropdown menus hover state.

To ensure the dropdown content actually shows on hover, you need to specify the divs 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.

Heres the CSS:

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, lets set the font color to black, the padding property to 5px, and the text decoration property to none.

Heres the CSS:

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.

Heres the CSS:

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

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

Whats Next in Coding Dropdown Menus

Now that you know how to create some different types of dropdown menus, youre 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.