In this blog post, we are going to see how we can create a dropdown menu or a dropdown list in HTML and use some CSS to style our dropdown menu.
Why Use A Dropdown Menu or Dropdown List?
Dropdown lists if you have seen them before on other websites are extremely powerful.
They provide the user a clear list to select a single option from the list of options that the dropdown menu provides.
They provide a good overall user experience.
An example of a dropdown list in a general everyday website is the month picker.
Using a dropdown list you can give the user to select the month of their birth.
Create Dropdown Menu Using The Select Tag
HTML provides us the "Select" tag that all browsers understand.
Using this "select" tag along with the "options" tag, we can create a dropdown list.
Let's see how.
Step 1 - Creating A Basic HTML Structure For Our Website
We will create a basic barebone HTML structure containing the head tag and the body tag.
Inside the head tag, we have a few elements and we are also linking our CSS stylesheet in the head tag.
We will create our dropdown list in the body tag.
Step 2 - Creating the Structure For Dropdown Using Select Element
Now, we will create the select list element and give it a name using the "name" attribute.
Line 12 - We are creating a select element and giving it the name attribute. We are creating a dropdown for selecting the birth month. So, we have given it the name "select-birth-month".
Line 13 - We create multiple option elements inside the select element. All of these elements act as options for the dropdown. The first element in the dropdown can be sometimes used to create a default. In our example, we are using it as a message "Select Birthday Month"
Line 14 to Line 25 - We are creating more option elements inside the select element. This time we are using actual values as labels for the options. We can use the value attribute to give the option a value.
This value can be a number or a string.
The result of the above code is a dropdown menu as below:
Styling Our Dropdown Select List Using CSS
We can add CSS styles to this select list and options to give them some styles.
