Javatpoint Logo
Javatpoint Logo

How to Make a Dropdown Menu in Html

In HTML, we can easily make a drop-down menu in the Html document using the following different ways:

  1. Using Html Form
  2. Using the Internal CSS

Using Html Form

If we want to make a dropdown menu in the Html document using Form, we have to follow the steps which are given below. Using these steps, we can easily make a dropdown menu:

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the form for making a dropdown menu.

Step 2: Now, we have to place the cursor at that point in the body tag of the Html document where we want to show the dropdown menu. And, then we have to type the <form> tag at that point.

Step 3: Now, we have to define the <label> tag and <select> tag between the starting and closing form tag.

Step 4: Now, we have to define the option tag according to the number of values which are to be shown in the drop-down menu.

Step 5: And, at last, we have to save the Html file and then run the file.

Test it Now

The output of above Html Code is shown in the following screenshot:

How to Make a Dropdown Menu in Html

Using Internal CSS

If we want to make a dropdown menu in the Html document using Internal Cascading style sheet, we have to follow the steps which are given below. Using these steps, we can easily make a dropdown menu:

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the Internal CSS for making a dropdown menu.

Step 2: Now, we have to place the cursor just after the closing of title tag in the head tag of the Html document and then define the styles inside the <style> tag as shown in the following block.

Now, we have to create the drop-down menu itself. So, first we have to define a class dropbtn with the different attributes which are shown in the following block:

Step 3: Then, we have to use another class which define the dropdown.

Step 4: Now, we have to create another class which is used to describe how the drop-down menu appears. This class contains various attributes which are shown in the following block.

Step 5: Now we have to add another class for defining the color and size of a text in the drop-down menu.

Step 6: And at last in a style tag, we have to edit the hover behaviour of drop-down menu. So, we can easily use the following code in our style tag for editing.

Step 7: Now, we have to place the cursor in the body tag where we want to show the drop-down menu. And, then we have to insert the following code in the body tag.

Step 8: And, at last, we have to save the Html file and then run the file in the browser.

Test it Now

The output of above Html code is shown in the following screenshot:

How to Make a Dropdown Menu in Html




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA