CSS Drop Down Menu Animation

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);
		
	}
}

Contents show