Hover Drop Down Menu :
======================
HTML CODE
=====================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Dropdown</title>
<link rel ="stylesheet" href="mycss.css">
</head>
<body>
<div class="dropdown">
<button class="dropbtn"> Hover Here</button>
<div class="dropdown-content">
<a href="#"> HTML</a>
<a href="#"> CSS</a>
<a href="#"> JS</a>
</div>
</div>
</body>
</html>
===================
CSS CODE
==================
.dropbtn{
background-color: #58ee0d; color: black;
padding: 15px; font-size: 15px; border:none;
}
.dropdown{
position:relative; margin-left:100px;
}
.dropdown-content{
position:absolute; display: none;
background-color: red; min-width:110px;
box-shadow:1px 8px 16px 1px yellow;
z-index: 1;
}
.dropdown-content a{
color:black; padding: 10px 15px;
text-decoration: none; display: block;
}
.dropdown-content a:hover{
background-color: orange;
}
.dropdown:hover .dropdown-content{display: block;}
body{
background-color: rgb(217,9,9);
}
