Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a hoverable dropdown menu with CSS?
Hoverable dropdown is dropdown that opens when we hover on that dropdown. This kind of dropdown are mostly used on header menu. If the user hover over on any element of the header menu then it will automatically open and render the content of that dropdown.
Steps to Create Hoverable Dropdown
Before proceeding to create a hoverable dropdown we will create a dropdown structure first using HTML.
Step 1 - Add HTML: Here we will create dropdown structure for that we can use <button>, <a> or <p> any element. here in this article we will use the button element.
<div class="dropdown-menu">
<button class="menu-btn">Web Technology</button>
<div class="menu-content">
<a class="links" href="#">HTML</a>
<a class="links" href="#">CSS</a>
<a class="links" href="#">JavaScript</a>
</div>
Step 2 - Add CSS: Now we will set "position: relative;" on .dropdown-menu class so the menu can render just below the dropdown button using "position: absolute". To keep the dropdown content hide until user hover on it we will use "display: none;" on .menu-content class. Rest we need define other properties as per the need how we want to design the dropdown.
.menu-btn {
background-color: #06D001;
color: #F3FF90;
padding: 8px;
border-radius: 2px;
font-size: 12px;
font-weight: bolder;
border: none;
}
.dropdown-menu {
position: relative;
display: inline-block;
}
.menu-content {
display: none;
position: absolute;
background-color: gray;
z-index: 1;
}
.links {
padding: 8px;
border-radius: 2px;
border-radius: 2px;
color: #F3FF90;
text-decoration: none;
display: block;
font-size: 12px;
border-bottom: 1px solid lightgray;
min-width: 95px;
}
.links:hover {
background-color: #06D001;
}
.dropdown-menu:hover .menu-content {
display: block;
}
.dropdown-menu:hover .menu-btn {
background-color: #059212;
}
Complete Example Code
In the following example we have combined the above step's pseudo code into a complete to code to achieve a hoverable dropdown.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.menu-btn {
background-color: #06D001;
color: #F3FF90;
padding: 8px;
border-radius: 2px;
font-size: 12px;
font-weight: bolder;
border: none;
}
.dropdown-menu {
position: relative;
display: inline-block;
}
.menu-content {
display: none;
position: absolute;
background-color: gray;
z-index: 1;
}
.links {
padding: 8px;
border-radius: 2px;
border-radius: 2px;
color: #F3FF90;
text-decoration: none;
display: block;
font-size: 12px;
border-bottom: 1px solid lightgray;
min-width: 95px;
}
.links:hover {
background-color: #06D001;
}
.dropdown-menu:hover .menu-content {
display: block;
}
.dropdown-menu:hover .menu-btn {
background-color: #059212;
}
</style>
</head>
<body>
<h3>Hoverable Dropdown</h3>
<p>
Here we have used display property to hide
and render dropdown content and other properties
are used to decorate the dropdown.</p>
<div class="dropdown-menu">
<button class="menu-btn">Web Technology</button>
<div class="menu-content">
<a class="links" href="#">HTML</a>
<a class="links" href="#">CSS</a>
<a class="links" href="#">JavaScript</a>
</div>
</div>
</body>
</html>
Conclusion
In this article we have learned how to create a hoverable dropdown using HTML and CSS. Keeping dropdown hide until the user hover on it and render when the user hover on the element is the most important part to remember.
2K+ Views
