Disclaimer: TubeMint is fully funded by its readers, we recommend hightly rated affiliate products and services and when you buy them through our links, we get commission at no extra cost to you. Thanks for you support!
css drop down menu animation

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

Leave a Reply