In this post we will learn how to create a hoverable dropdown menu using css. Whenever we move the mouse cursor over the dropdown button, we will see the menu and the menu will be hidden as soon as we remove the cursor from the button. 


How To Create A Hoverable Dropdown Menu with CSS ?


Create A Hoverable Dropdown Menu

Example of Hoverable Dropdown Menu



To create a hoverable dropdown menu, we follow the following steps:

Step (1) : In this step, we will write HTML code as following step:
  • First we will take a <button> and give it a dropbtn class. We will use this <button> to open the dropdown menu. Here we can also use <a> and <p> instead of the <button>.
  • To create a dropdown menu and add dropdown links to it, we will use <div> element and give it the class of dropdown-content.
  • With the help of CSS to control the position of the dropdown menu, we will wrap the <div> element around the <button> and the <div> element.
<div class="dropdown">
<button class="dropbtn">Dropdown Button</button>
<div class="dropdown-content">
<a href="#"> Sub Menu 1</a>
<a href="#"> Sub Menu 2</a>
<a href="#"> Sub Menu 3</a>
</div>
</div> code-box

Step (2) : Now we write CSS code in the following steps:
  • First we give position:relative to .dropdown class. So that we will be able to place the dropdown content just below the dropdown button. 
  • Then we style the dropdown button with color, font-size, padding etc.
  • Now we style the .dropdown-content class. With display:none we hide this by default. To control its position relative to .dropdown, it will be given position:absolute
  • Then style the dropdown links with text-decoration, color, padding etc.
  • The real work starts now. With the help of the :hover selector, let us display:block the .dropdown-content class.
.dropdown {
    position: relative;
display: inline-block;
}
.dropbtn {
    background-color: #000;
color: #fff;
padding: 15px;
font-size: 15px;
border: none;
}
.dropdown-content {
    display: none;
position: absolute;
background-color: #fff;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
    color: #000;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown-content a:hover {
    background-color: #ddd;
text-decoration: none;
}
.dropdown:hover .dropbtn {
    background-color: #444;
} code-box

Summary

In this post we learn how to create a hoverable dropdown menu. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post