HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Create a hoverable dropdown with CSS
Move the mouse over the examples below:
Create a dropdown box that appears when the user moves the mouse over an element.
<style>
.dropdown {
position: relative;
display: inline-block;
}
.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;
}
</style>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
Example Explained
Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it.
Wrap a <div> element around the elements to position the dropdown content correctly with CSS.
.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.
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:
<style>
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The
container <div> - 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 {background-color: #f1f1f1}
/* 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;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link
1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
If you want the dropdown menu to go from right to left, instead of left to right, add right: 0;
.dropdown-content {
right: 0;
}
How to add an image and other content inside the dropdown box.
Hover over the image:
How to add a dropdown menu inside a navigation bar.