How to create a dropdown using HTML?

A dropdown in a webpage usually contains a list of items. It is used for creating some menus or navigational links. Here we will list out the ways to add dropdown in HTML.

Dropdown using HTML <select> Tag

• The <select> tag can be used to add a list of elements to create a dropdown in HTML.
• Each item is added within <option> tag inside the <select> tag.
• It has a name attribute to add a name to the dropdown menu.
• An id is added with some unique name for accessibility purposes.
• Each <option> has a value attribute which when selected can be submitted to the server.
• Add selected attribute with the option 0 which can be selected by default when the page loads.

Example: Creating a dropdown using <select> tag

Here is an example to create a dropdown using the <select> tag. There is a list of items that can be selected by clicking on it.

Dropdown using CSS

• Use <button> or <span> tag to open the dropdown list.
• Add a list of items to the dropdown using <div>.
• Add the CSS styling to the <div>.
• Use the dropdown class along with position: relative to open the dropdown list below the dropdown button.
• Use position: absolute to the dropdown content
• Use background color, display style, and other CSS properties to customize the dropdown.

Example: Dropdown using CSS

Here, we have used various CSS properties to style the dropdown.

Conclusion

We can easily create a dropdown for any navigation or selecting an item from the list. HTML dropdown can be created using the <select> tag or using CSS. It depends on the purpose of the dropdown on the webpage. For navigational purposes add links and style with CSS. But if it is for selecting any item and submitting it to the server then use the <select> tag.