How TO — Hoverable Dropdown
Learn how to create a hoverable dropdown menu with CSS.
Dropdown
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:
Create A Hoverable Dropdown
Create a dropdown menu that appears when the user moves the mouse over an element.
Step 1) Add HTML:
Example
Example Explained
Use any element to open the dropdown menu, e.g. a , or
element.
Use a container element (like ) to create the dropdown menu and add the dropdown links inside it.
Wrap a element around the button and the to position the dropdown menu correctly with CSS.
Step 2) Add CSS:
Example
/* Dropdown Button */
.dropbtn background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
>
/* The container — needed to position the dropdown content */
.dropdown position: relative;
display: inline-block;
>
/* Dropdown Content (Hidden by Default) */
.dropdown-content display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>
/* Links inside the dropdown */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>
/* Change color of dropdown links on hover */
.dropdown-content a:hover
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn
Example Explained
We have styled the dropdown button with a background-color, padding, etc.
The .dropdown class uses position:relative , which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute ).
The .dropdown-content class holds the actual dropdown menu. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens).
Instead of using a border, we have used the box-shadow property to make the dropdown menu look like a «card». We also use z-index to place the dropdown in front of other elements.
The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.
CSS Dropdowns
Create a dropdown box that appears when the user moves the mouse over an element.
Example
.dropdown-content display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
>
.dropdown:hover .dropdown-content display: block;
>
Example Explained
HTML) Use any element to open the dropdown content, e.g. a , or a element.
Use a container element (like ) to create the dropdown content and add whatever you want inside of it.
Wrap a element around the elements to position the dropdown content correctly with CSS.
CSS) The .dropdown class uses position:relative , which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute ).
The .dropdown-content class holds the actual dropdown content. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens).
Instead of using a border, we have used the CSS box-shadow property to make the dropdown menu look like a «card».
The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.
Dropdown Menu
Create a dropdown menu that allows the user to choose an option from a list:
This example is similar to the previous one, except that we add links inside the dropdown box and style them to fit a styled dropdown button:
Example
/* The container — needed to position the dropdown content */
.dropdown position: relative;
display: inline-block;
>
/* Dropdown Content (Hidden by Default) */
.dropdown-content display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>
/* Links inside the dropdown */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>
/* Change color of dropdown links on hover */
.dropdown-content a:hover
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content display: block;
>
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn background-color: #3e8e41;
>
How to Create a Dropdown Menu in HTML and CSS
This article was co-authored by wikiHow staff writer, Jack Lloyd. Jack Lloyd is a Technology Writer and Editor for wikiHow. He has over two years of experience writing and editing technology-related articles. He is technology enthusiast and an English teacher.
The wikiHow Tech Team also followed the article’s instructions and verified that they work.
This article has been viewed 886,713 times.
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.
- 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.
Enter the document header. This is the code that determines the code type used for the rest of the document:
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; >
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; >
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; >
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; >
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;>
Close the CSS section. Enter the following code to indicate that you’re done with the CSS portion of the document:
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">Namebutton> div class="dropdown-content"> 
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">Namea> a href="https://www.website.com">Namea> a href="https://www.website.com">Namea> 
Close out your document. Enter the following tags to close the document and indicate the end of the drop-down menu’s code:
Review your drop-down box’s code. Your code should look similar to the following: [2] X Research source
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 Mediabutton> div class="dropdown-content"> a href="https://www.google.com">Googlea> a href="https://www.facebook.com">Facebooka> a href="https://www.youtube.com">YouTubea> div> div> body> html>