How to Make Dropdown Menu in HTML?

What We are Creating?

Generally, a dropdown after expansion looks like this, so for the entire of this article, we'll be discussing about how to make these.

• We will learn to create a dropdown in HTML.
• Also will focus on styles using CSS.
• Subsequently, we will create a beautiful-looking dropdown menu.
• We will also discuss how to make a hoverable dropdown menu instead of a clickable menu.
• We can set the default value to dropdown component. So, we will create a dropdown with default value.
• In the end, we will see how to make a multi-select dropdown menu with examples.

Select Tag

The select tag is used to create a dropdown menu in HTML. We use the option tag within the select tag to add items to the dropdown menu. Before creating the dropdown, let's discuss the attributes of the select tag.

Attributes of the Select Tag

The attributes of the select tag are:

• disabled: We can use the disabled attribute with the select tag, this attribute when specified with an option makes that option disabled and doesn't allow the user to select it.
• name: Names are assigned so that we can use them to reference the data when it is submitted to the server.
• multiple: This attribute is used so that the user can select multiple options from the dropdown menu, generally user can select only one option, but with the help of this tag more than one option can be selected.
• required: The required attribute of the select tag is used as a validator, this makes sure that the user selects a value before submitting the form.
• size: The size attribute specifies to the browser how many options will be visible in the dropdown at once.
• autofocus: This attribute is used so that the dropdown menu in HTML automatically gets a focus when the page loads.

How to Make Dropdown Menu in HTML?

The dropdown menu in HTML is created using the select tag. The process below shows how we can create a dropdown menu in HTML:

Create a Div

We create a div for the dropdown with class="dropdown" so that we can reference it easily while applying CSS.

Create a Heading

We now create a heading, to show what is the dropdown about.

Create a Div to Enclose the Select Tag

Now, we create a div with class="styled-select" so that we can enclose the select tag and options with this class and can apply the CSS easily.

Add a Select Tag

Now, create a select tag with name, and id attribute to the select tag. The code will look like this:

Add Options

The final step is to add options, so to add options to a dropdown menu in HTML, we use the option tag. We add the options between the opening and closing select tag and we can add any number of options to the dropdown list.

Example

Combining All Together

Output

How to Make a Hoverable Dropdown Menu?

If we are using a select element and want to create a hoverable dropdown menu, then we need to use javascript to perform suitable manipulations on the mouse over event, in the select element there is nothing to create a hoverable menu without Javascript.

We will use other HTML elements(apart from option and select) and CSS to create a hoverable dropdown menu that appears when a user hovers the mouse on the dropdown element.

Below are the steps following which we can create the hoverable dropdown menu:

Create a Div with a Class Name Dropdown

Create a div and add the class dropdown to it. This will act as the parent of all sub components related to dropdown component.

HTML

CSS

The class contains some simple styles, like background color, font, padding and fixed height etc.

Here we are using the units in width viewport.

Create the Text

Now, we will create an element that will show the label for dropdown.

HTML

Create the Dropdown

Now we will create our dropdown, for that we are going to use a parent component which will include two div, one for select tag equivalent and other for option tag equivalent. Let's provide class styled-select to this div,

HTML

CSS

• The display is inline-block so that it can take the exact required width and it could be centered within the parent,
• text-align is left because in it's parent we have set same property to center but here we don't want our content in center so we are overriding the parent styles,
• width is just to fix some width for the entire component.

Create Select Component

This is the component equivalent to select tag.

HTML

CSS

• background We are using an icon as background image, because we can't provide styles to the default icon which came along with select tag. The 98% and 50% is denoting the horizontal and vertical position of the background icon.
• background-size is being used to define the size of that icon.

Create Option Component

This is equivalent to option tag, it will be used to wrap all option items,

HTML

CSS

• We are providing it absolute positioning so that it doesn't interfere with the normal flow of the page.
• We have fixed the same width here, as we did in the dropdown component with styled-select class.
• The div having option id will remain hidden because of display none, and the styles associated with the selector .styled-select:hover will be applied when user hover on the dropdown component, means our option component will be displayed.

Create Item

HTML

CSS

• Item component contains simple styles and on hover we are changing the background-color so that it can indicate which item is selected right now.

Combining All Together

Output

HTML Dropdown Default Value

The first option specified in the select tag is used as the default value for the HTML dropdown menu.

Still, if we want to change the default value for the HTML dropdown and set any other option as default we can use the selected attribute with an option, using the selected attribute with an option makes it default.

Syntax

Example

Output

Multiselect Dropdown

Generally, we can select only one option from the dropdown. We can select multiple items from the dropdown menu by using the multiple attribute.

To select multiple options, we need to hold the shift or ctrl key and then select the option using the mouse.

Syntax

Example

Output