CSS dropdown menu
Use CSS to create a dropdown menu effect that appears when the mouse moves over it.
Dropdown menu example
Example demo 1
Example
www.example.com
Example demo 2
Example demo 3
Basic dropdown menu
When the mouse moves over the specified element, a dropdown menu will appear.
Example
Try it Yourself »
Example analysis
HTML section:
We can use any HTML element to open the dropdown menu, such as a <span>, or a <button> element.
Use a container element (such as <div>) to create the dropdown menu content and place it anywhere you want.
Use a <div> element to wrap these elements, and use CSS to style the dropdown content.
CSS section:
.dropdownClass usageposition:relative, this will set the dropdown menu content to be placed below the dropdown button (usingposition:absolutethe bottom-right position of ).
.dropdown-contentclass is the actual dropdown menu. It is hidden by default, and will be displayed when the mouse moves over the specified element. Notemin-widthSet the value to 160px. You can modify it freely.Note:If you want to set the dropdown content to have the same width as the dropdown button, you can setwidthas 100% (overflow:autoset to allow scrolling on small screens).
We usebox-shadowThe attribute makes the dropdown menu look like a "card".
:hoverThe selector is used to display the dropdown menu when the user moves the mouse over the dropdown button.
dropdown menu
Create a dropdown menu that allows users to select an item from the list:
This example is similar to the previous one, when we added links to the dropdown list and set styles:
Example
/* Dropdown button styles */
.dropbtn {
background-color: #4C7EAF;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Container <div> - needs 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);
}
/* Dropdown menu links */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change dropdown menu link color on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show dropdown menu on mouse hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* When the dropdown content is displayed, change the background color of the dropdown button */
.dropdown:hover .dropbtn {
background-color: #4877A6;
}
</style>
<div class="dropdown">
<button class="dropbtn">dropdown menu</button>
<div class="dropdown-content">
<a href="#">Example 1</a>
<a href="#">Example 2</a>
<a href="#">Example 3</a>
</div>
</div>
Try it Yourself »
Dropdown content alignment
float:left;
float:right;
If you want the content of a right-floated dropdown menu to be aligned from right to left instead of left to right, you can add the following code:right: 0;
More Examples
Image Dropdown
This example demonstrates how to add images to a dropdown menu.
Navbar Dropdown
This example demonstrates how to add a dropdown menu to the navigation bar.