In this CSS tutorial, we will be going learn how can we care dropdown menu using CSS styling. In this tutorial, we have provided two source codes to show how can we use the CSS and create a dropdown menu for our webpage.
A Basic Hover Dropdown Menu
In a hover dropdown menu when the user hover the cursor over the menu element a list of sub-items drop-down. And to create such effect we have to use various CSS properties along with the Pseudo-Class
:hove
r.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown-menu {
position: relative;
display: inline-block;
}
.menu-content {
display: none;
position: absolute;
background-color: yellow;
box-shadow: 0px 8px 16px 0px red;
}
.dropdown-menu:hover .menu-content {
display: block;
}
</style>
</head>
<body>
<div class="dropdown-menu">
<span>Hover Over Me</span>
<div class="menu-content">
<p>Welcome to TechGeekBuzz!</p>
<p>This Tutorial is about Dropdown Menu</p>
</div>
</div>
</body>
</html>
Behind the Code
HTML Code
In the above example, we have created a
<div>
element with a class name
“dropdown-menu”
which contain all the text content. We have used the
<span>
element for the and
:hover
pseudo-class to open the dropdown menu, you can also replace the
<span>
element with a
<button>
. We have also created a separate
<div>
element for the menu content, and the class name of that
div
is
“menu-content”
. You can put more content inside that
<div>
element. But Always make sure that the
menu content <div>
element always be a child of dropdown div.
CSS Code
For the
.
dropdown-menu
element we have set the
position:relative
this is important because it make sure that the content of the dropdown menu will be displayed at the right place. The
.menu-content
contain the actual content for the drop down menu, so we only want to see that content when the user hovers over the
<span>
element that’s why we have set its
display:none
with
position:absolute
. The
box-shadow
property makes the menu content look like a card, you can also use the
border
property instead of
box-shadow
. The pseudo-element
:hover
select the
menu-content
and set the
display:block
when the user hover the mouse over the
.dropdown-menu
or
<span>
element content.
Dropdown Links
Dropdown menu are generally used to show a list of links. This example below create a dropdown menu which contains a list of links.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
color: white;
background-color: blue;
}
.dropdown-menu {
position: relative;
display: inline-block;
}
.menu-content {
display: none;
position: absolute;
box-shadow: 0px 8px 16px 0px;
}
.menu-content a {
color: red;
padding: 10px 15px;
display: block;
}
.dropdown-menu:hover .menu-content {
display: block;
}
</style>
</head>
<body>
<div class="dropdown-menu">
<button class="btn">Hover Over Me</button>
<div class="menu-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
</html>
Summary
To create a dropdown menu we need to wrap the menu-content div inside the main dropdown-menu <div> element. The only main trick is to keep the
menu-content
display
none
and
dropdown-menu :hover
display
to
block
.