CSS Dropdowns
CSS Dropdowns
CSS dropdowns are used to display a list of options or content when a user clicks or hover over an element, like a button or a navigation link.
A CSS dropdown consists of a trigger element (like <div>, <button>, <p>, <a>, etc.).
When the trigger element is clicked or hovered over, the dropdown content will be displayed.
The dropdown content is a container element (e.g. <div>) that holds the hidden content (can be text, links, images, etc.).
Mouse over the three CSS dropdown examples below:
CSS Dropdown Box with Text
Here, we create a dropdown box with some text, that appears when the user mouses over a <div> element.
Example
<style>
.dropdown {
position: relative;
}
.dropdown-content {
display:
none;
position: absolute;
background-color: #f9f9f9;
min-width: 130px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding:
12px 16px;
}
.dropdown:hover
.dropdown-content {
display: block;
}
</style>
<div class="dropdown">Mouse over me!
<div class="dropdown-content">Hello World!</div>
</div>
Try it Yourself »
Example Explained
- The .dropdown class uses
position:relative, which is needed when we want the dropdown content to be placed right below the trigger element (the dropdown content will useposition:absolute). - The .dropdown-content class holds the dropdown content. It is hidden by default, and will be displayed on hover.
- The
min-widthproperty is set to 130px. Feel free to change this! If you want the width of the dropdown content to be as wide as the trigger element, setwidthto 100% andoverflow:autoto enable scroll on small screens. - Instead of using a border, we use the
box-shadowproperty to make the dropdown content look like a "card". - The
:hoverselector is used to show the dropdown content when the user mouses over the <div class="dropdown"> element.
CSS 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 a button and links inside the dropdown box and style them to fit the dropdown button:
Example
<style>
.dropdown {
position: relative;
}
/* Style the dropdown button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown content */
.dropdown-content {
display: none;
position:
absolute;
background-color: #f9f9f9;
min-width: 200px;
box-shadow:
0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside dropdown content */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #f1f1f1
}
/* Show the
dropdown content on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change background color of dropdown
button on hover */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown
Menu</button>
<div class="dropdown-content">
<a href="#">Link
1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
Try it Yourself »
CSS Right-aligned Dropdown
If you want the dropdown menu to go from right to left, instead of left to right, add
right: 0;
CSS Dropdown Image
How to add an image and other content inside the dropdown box.
CSS Dropdown Navbar
How to add a dropdown menu inside a navigation bar.
