How to create a simple Drop Down menu using html css
HTML CODE :
========================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drop Down Menu</title>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Course</a>
<ul class="dropdown">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JS</a></li>
</ul>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
</nav>
</body>
</html>
========================
CSS CODE :
========================
*{
margin: 0; padding: 0; list-style: none;
text-decoration: none; color:red;
}
ul{ background-color: blue;}
ul li{
display: inline-block; position: relative;
}
ul li a{
display: block; padding: 20px 20px; font-size: 16px;
text-align: center;
}
ul li.dropdown li{
display: block;
}
ul li ul.dropdown{
width: 100%; background-color: aqua;
position:absolute; z-index: 999;
display: none;
}
ul li a:hover{background-color: brown;}
ul li:hover ul.dropdown{
display: block;
}
