How To Create a Hoverable Dropdown Menu

Today, we are going to discuss how to create a hoverable dropdown menu using css design. Here we have provided simple example for hoverable dropdown menu design. When you hover on div button, then it will show you menu list just below the div button layout.

Create A Hoverable Dropdown

Lets see the complete example and it will help you to build more understanding on this. We have made this as simple as possible. Hope you like this simple demo example.

css dropdown menu.html
Here we have combined HTML and CSS design in one HTML file:

<style>
body{
     background-color:#e5e5e5;
  margin:100px auto;
  width:500px;
}
 .dropdown {
     position: relative;
     display: inline-block;
}
 #button{
     width:150px;
     height:30px;
     background-color:#ff3232 ;
     padding:12px;
     border-radius:5px;
     font-weight:bold;
     color:white;
}
 .dropdown-content {
     top:30px;
     display: none;
     position: absolute;
     background-color: #f9f9f9;
     min-width: 260px;
     min-heigth:400px;
     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 id="button">Mouse over me</span>
  <div class="dropdown-content">
    <p>Option One</p>
 <p>Option Two</p>
 <p>Option Three</p>
 <p>Option Four</p>
 <p>Option Five</p>
 <p>Option Six</p>
 
  </div>
</div>

Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/How%20To%20Create%20a%20Hoverable%20Dropdown%20Menu

Demo Link :
https://skptricks.github.io/learncoding/css%20dropdown%20menu%20on%20hover/css%20dropdown%20menu.html

This is all about hover drop down menu html and css. Hope you like this simple example. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.