HTML Code for CSS Drop Down Menu Animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drop Down Menu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a>
<ul>
<li><a href="#">Men</a></li>
<li><a href="#">Women</a></li>
<li><a href="#">Kids</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Sales</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Return</a></li>
<li><a href="#">Affiliates</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
</ul>
</nav>
</header>
</body>
</html>
CSS for Drop Down Menu Animation
body{
color: darkgray;
font-family: sans-serif;
box-sizing: border-box;
}
nav{
display: block;
position: relative;
}
nav ul li{
float: left;
padding: 5px 10px;
list-style-type: none;
}
nav ul li ul::after{
content: "--";
}
nav ul li:hover ul::after{
content: "";
}
nav ul li a{
text-decoration: none;
font-size: 22px;
}
nav ul li ul li a{
text-decoration: none;
font-size: 19px;
color: gray;
}
ul li > ul li{
display: none;
float: none;
}
nav ul li ul{
position: absolute;
margin-left: -25px;
}
li a:hover{
color: salmon;
}
ul li:hover ul li{
display: block;
animation: downli 1s ease-in-out;
background-color: lightgray;
}
@keyframes downli{
0%{
opacity: 0;
transform: translateY(-100px);
background-color: white;
}
50%{
opacity: 0;
}
100%{
opacity: 1;
transform: translate(0);
}
}