How to Create a Dropdown Menu in HTML and CSS

Written by Jack Lloyd

Last Updated: December 12, 2024 Tested

This wikiHow teaches you how to create a drop-down menu for your website by using HTML and CSS coding. The drop-down menu will appear when someone hovers over its button; once the drop-down menu appears, the user will be able to click one of the options in it to visit the option's webpage.

Steps

Download Article

1
Open your HTML text editor. You can use a simple text editor, such as Notepad or TextEdit, or you can use a more advanced text editor like Notepad++.
- If you do decide to use Notepad++, make sure you select HTML from the "H" section of the Language menu at the top of the window before you proceed.
2
Enter the document header. This is the code that determines the code type used for the rest of the document:
```
<!DOCTYPE html>
<html>
<head>
<style>
```
Advertisement
3
Create the drop-down menu itself. Type in the following code to determine the size and color of the drop-down menu, making sure to replace "#" with the number you want to use (the larger the number, the larger your drop-down menu will be). You can also replace the "background-color" and "color" values with any color (or HTML color code) of your choice:^{[1]
X
Research source}
```
.dropbtn {
    background-color: black;
    color: white;
    padding: #px;
    font-size: #px;
    border: none;
}
```
4
Indicate that you want to place your links in the drop-down menu. Since you'll be adding links to the drop-down menu later, you can place them inside the drop-down menu by entering the following code:
```
.dropdown {
    position: relative;
    display: inline-block;
}
```
5
Create the drop-down menu's appearance. The following code will determine the drop-down menu's size, position when other webpage elements are involved, and color. Be sure to replace the "min-width" section's "#" with your preferred number (e.g., 250) and change the "background-color" heading to your preferred color or HTML code:
```
.dropdown-content {
    display: none;
    position: absolute;
    background-color: lightgrey;
    min-width: #px;
    z-index: 1;
}
```
6
Add detail to the drop-down menu's contents. The following code addresses the drop-down menu's text color and the size of the drop-down menu's button. Be sure to replace "#" with your preferred number of pixels to dictate the size of the button:
```
.dropdown-content a {
    color: black;
    padding: #px #px;
    text-decoration: none;
    display: block;
}
```
7
Edit the drop-down menu's hover behavior. When you hover your mouse over the drop-down menu's button, you'll need a few colors to change. The first "background-color" line refers to the color change that will appear when you select an item in the drop-down menu, while the second "background-color" line refers to the color change of the drop-down menu's button. Ideally, both of these colors will be lighter than their appearance when not selected:
```
.dropdown-content a:hover {background-color: white;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: grey;}
```
8
Close the CSS section. Enter the following code to indicate that you're done with the CSS portion of the document:
```
</style>
</head>
```
9
Create the drop-down button's name. Enter the following code, making sure to replace "Name" with whatever you want the drop-down button's name to be (e.g., Menu):
```
<div class="dropdown">
<button class="dropbtn">Name</button>
<div class="dropdown-content">
```
10
Add your drop-down menu's links. Each of the items in the drop-down menu should link to something, be that a page on your website or an external website. You can add items to the drop-down menu by entering the following code, making sure to replace https://www.website.com with the link's address (keep the quotation marks) and "Name" with the link's name.
```
<a href="https://www.website.com">Name</a>
<a href="https://www.website.com">Name</a>
<a href="https://www.website.com">Name</a>
```
11
Close out your document. Enter the following tags to close the document and indicate the end of the drop-down menu's code:
```
</div>
</div>
</body>
</html>
```

Step 12 Review your drop-down box's code.

Your code should look similar to the following:^{[2]
X
Research source}

<!DOCTYPE html>
<html>
<head>
<style>

.dropbtn {
    background-color: black;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

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

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

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

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

</style>
</head>

<div class="dropdown">
<button class="dropbtn">Social Media</button>
<div class="dropdown-content">

<a href="https://www.google.com">Google</a>
<a href="https://www.facebook.com">Facebook</a>
<a href="https://www.youtube.com">YouTube</a>

</div>
</div>
</body>
</html>

Community Q&A

Search

Add New Question

Question

I just made a dropdown menu using these instructions and it worked. How do I move/change the position of my drop down menu in HTML?

Community Answer

To move this dropdown menu, cut out the tags that signify the dropdown (particularly, cut out the code between and its closing pair) and paste them somewhere else. Additionally, you can add some code to the style for the dropdown class such as float, to align the menu to your liking.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 14 Helpful 15
Question

What is the difference between delete, drop, and truncate in Oracle?

Community Answer

Delete: delete a row in a table. Truncate: delete all rows in a table. Drop: delete structure of a table.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 6 Helpful 8
Question

Where in the head section can I link a stylesheet?

Community Answer

You can link a stylesheet (CSS, LessCSS, SCSS, SASS) anywhere in your tags, provided that your head tags are after the opening tag and before the opening tag.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 6 Helpful 6

See more answers

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Tips

The above instructions are for a drop-down menu which will activate when you hover your mouse cursor over the drop-down menu's button. If you want to create a drop-down menu that only appears when clicked, you'll need to use JavaScript.^{[3]
X
Research source}

Thanks
Helpful 0 Not Helpful 0
Always test your code before posting it on your website.

Thanks
Helpful 0 Not Helpful 0

Submit a Tip

All tip submissions are carefully reviewed before being published

Name

Please provide your name and last initial

Submit

Thanks for submitting a tip for review!

Warnings

HTML colors are relatively limited when using tags such as "black" or "green". You can find an HTML color code generator that will allow you to create and use a custom color here.

Thanks
Helpful 0 Not Helpful 0