When the trigger element is clicked or hovered over, the dropdown content will be displayed.
The dropdown content is a container element (e.g.
) that holds the hidden content (can be text, links, images, etc.).
Mouse over the three CSS dropdown examples below:
Hello World!
CSS Dropdown Box with Text
Here, we create a dropdown box with some text, that appears when the user mouses over a
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>
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 use position:absolute).
- The .dropdown-content class holds the dropdown content. It is hidden by default, and will be displayed on hover.
- The
min-width property 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, set width to 100% and overflow:auto to enable scroll on small screens.
- Instead of using a border, we use the
box-shadow property to make the dropdown content look like a "card".
- The
:hover selector is used to show the dropdown content when the user mouses over the element.
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>
