How to Create a Dropdown Menu in HTML and CSS


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.

Part 1

 on How to Create a Dropdown Menu in HTML and CSS

1
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.

 on How to Create a Dropdown Menu in HTML and CSS

2
This is the code that determines the code type used for the rest of the document: <!DOCTYPE html> <html> <head> <style>

 on How to Create a Dropdown Menu in HTML and CSS

3
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] .dropbtn { background-color: black; color: white; padding: #px; font-size: #px; border: none; }

 on How to Create a Dropdown Menu in HTML and CSS

4
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; }

 on How to Create a Dropdown Menu in HTML and CSS

5
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; }

 on How to Create a Dropdown Menu in HTML and CSS

6
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; }

 on How to Create a Dropdown Menu in HTML and CSS

7
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;}

 on How to Create a Dropdown Menu in HTML and CSS

8
Enter the following code to indicate that you're done with the CSS portion of the document: </style> </head>

 on How to Create a Dropdown Menu in HTML and CSS

9
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">

 on How to Create a Dropdown Menu in HTML and CSS

10
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>

 on How to Create a Dropdown Menu in HTML and CSS

11
Enter the following tags to close the document and indicate the end of the drop-down menu's code: </div> </div> </body> </html>

 on How to Create a Dropdown Menu in HTML and CSS

12
Your code should look similar to the following:[2] <!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>