Within an HTML document, there are various methods available to create a dropdown menu effortlessly:
- Utilizing an HTML Form
- Employing Internal CSS for styling
Using Html Form
To create a dropdown menu in an HTML document using a form, we need to adhere to the following instructions. By following these guidelines, we can effectively generate a dropdown menu:
To begin, the initial step involves entering the HTML code into a text editor or accessing the current HTML file in the text editor of choice to implement a dropdown menu within a form.
<!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: Next, it is necessary to position the cursor within the body tag of the Html document at the desired location for displaying the dropdown menu. Subsequently, the <form> tag should be entered at this specific 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: Next, it is necessary to specify the <label> tag and the <select> tag within the form tag's opening and closing tags.
<form>
<label> Select Cars </label>
<select>
</select>
</form>
Step 4: Next, it is essential to specify the option tag based on the quantity of values that need to be displayed in the dropdown list.
<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 involves saving the HTML file and executing it to complete the process.
<!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>
The resulting display of the HTML code above can be viewed in the screenshot provided below:
Using Internal CSS
To create a dropdown menu in an HTML file using Internal CSS, the following steps need to be followed. By following these steps, it is possible to create a dropdown menu effortlessly:
To begin, the initial step involves entering the HTML code into a text editor or accessing the current HTML file in the text editor of choice to implement Internal CSS for creating a dropdown menu.
Step 2: Next, position the cursor immediately after the closure of the title tag within the head tag of the HTML document. Then, proceed to specify the styles within the <style> tag, as illustrated in the subsequent code block.
Next, we will proceed with the creation of the drop-down menu. Initially, we need to establish a class named dropbtn, incorporating various attributes as outlined in the subsequent section:
<style>
.dropbtn {
background-color: yellow;
color: black;
padding: 10px;
font-size: 12px;
}
</style>
Next, we need to utilize a separate class that defines the dropdown functionality.
.dropdown {
display: inline-block;
position: relative
}
Step 4: Next, it is necessary to generate a new class that defines the appearance of the drop-down menu. This particular class encompasses a range of characteristics illustrated in the subsequent block.
.dropdown-content {
position: absolute;
background-color: lightgrey;
min-width: 200px;
display: none;
z-index: 1;
}
Step 5: The next step is to introduce a new class that will be responsible for specifying both the color and size of text within the dropdown menu.
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
Step 6 involves modifying the hover behavior of a drop-down menu within a style tag. To accomplish this, the code snippet below can be utilized within the style tag for editing purposes.
.dropdown-content a:hover {
background-color: orange;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: grey;
}
Step 7: Next, position the cursor within the body tag at the desired drop-down menu display location. Subsequently, paste the provided code snippet into the body tag.
<div class="dropdown">
<button class="dropbtn"> C# Tutorial Web Desiging Tutorials</button>
<div class="dropdown-content">
<a href="html-tutorial"> Html </a>
<a href="css-tutorial"> CSS </a>
<a href="javascript-tutorial"> JavaScript </a>
</div>
</div>
Step 8: Finally, it is necessary to save the HTML file and then open it in a web browser to view the changes.
<!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"> C# Tutorial Web Desiging Tutorials</button>
<div class="dropdown-content">
<a href="html-tutorial"> Html </a>
<a href="css-tutorial"> CSS </a>
<a href="javascript-tutorial"> JavaScript </a>
</div>
</div>
</Body>
</Html>
The result of the HTML code provided can be viewed in the screenshot below: