How To Create Hover Dropdown Using Html And Css

How To Create Hover Dropdown Using Html And Css

What is a Drop Down?


A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list: Create a dropdown menu that appears when the user moves the mouse over an element.


Steps On How To Create Hover Dropdown Using Html And Css


Step 1) Add HTML:

<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>



Step 2) Add CSS:

/* 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);



/* 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;




P.S. Thanks for reading this far! If you found value in this, we’d really appreciate it if you recommend this post (by clicking the share buttons) so other people can learn!

Found this Howto helpful? Subscribe for more!

You may also learn:

To Top