HTML Tutorial
HTML Attributes
- html-global-attributes
- html-event-attributes
HTML Tags List
HTML5 Advance
HTML API
HTML Color Names
- html-color-names
HTML Misc
MCQ
- html-mcq
Interview Questions
- html-interview-questions

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:

Using Html Form
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.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Make a Drop Down Menu using Html Form
</Title>
</Head>
<Body> 
This page helps you to understand how to make a dropdown menu in Html document.
And, this section helps you to understand how to make a drop-down menu using Html form.
</Body> 
</Html>

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

at that point.

<Body> 
This page helps you to understand how to make a dropdown menu in the Html document.
And, this section helps you to understand how to make a drop-down menu using Html form.
<form>
 
 
</form>
</Body>

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

<form>
<label> Select Cars </label>
<select>
 
</select>
</form>

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.

<form>
<label> Select Cars </label>
<select>
<option value = "BMW"> BMW 
</option>
<option value = "Mercedes"> Mercedes 
</option>
<option value = "Audi"> Audi
</option>
<option value = "Skoda"> Skoda
</option>
</select>
</form>

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

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Make a Drop Down Menu using Html Form
</Title>
</Head>
<Body> 
This page helps you to understand how to make a dropdown menu in Html document.
And, this section helps you to understand how to make a drop down menu using Html form.
<form>
<label> Select Cars </label>
<select>
<option value = "BMW"> BMW 
</option>
<option value = "Mercedes"> Mercedes 
</option>
<option value = "Audi"> Audi
</option>
<option value = "Skoda"> Skoda
</option>
</select>
</form>
</Body> 
</Html>

Test it Now

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

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

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

.dropdown {
    display: inline-block;
    position: relative
}

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.

.dropdown-content {
    position: absolute;
    background-color: lightgrey;
    min-width: 200px;
    display: none;
    z-index: 1;
}

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

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

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.

.dropdown-content a:hover {
    background-color: orange;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    background-color: grey;
}

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.

<div class="dropdown">
<button class="dropbtn"> JavaTpoint Web Desiging Tutorials</button>
<div class="dropdown-content">
<a href="https://www.tutorialsinfo.com/html-tutorial"> Html </a>
<a href="https://www.tutorialsinfo.com/css-tutorial"> CSS </a>
<a href="https://www.tutorialsinfo.com/javascript-tutorial"> JavaScript </a>
</div>
</div>

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

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Make a Dropdown Menu using Internal CSS
</Title>
<style>
.dropbtn {
    background-color: yellow;
    color: black;
    padding: 10px;
    font-size: 12px;
}
.dropdown {
    display: inline-block;
    position: relative
}
.dropdown-content {
    position: absolute;
    background-color: lightgrey;
    min-width: 200px;
    display: none;
    z-index: 1;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {
    background-color: orange;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    background-color: grey;
}
</style>
</Head>
<Body> 
This page helps you to understand how to make a dropdown menu in Html document.
And, this section helps you to understand how to make a dropdown menu using Internal CSS. <br>
<div class="dropdown">
<button class="dropbtn"> JavaTpoint Web Desiging Tutorials</button>
<div class="dropdown-content">
<a href="https://www.tutorialsinfo.com/html-tutorial"> Html </a>
<a href="https://www.tutorialsinfo.com/css-tutorial"> CSS </a>
<a href="https://www.tutorialsinfo.com/javascript-tutorial"> JavaScript </a>
</div>
</div>
</Body> 
</Html>

Test it Now

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