Front End

CSS Drop Down Menu Animation

HTML Code for CSS Drop Down Menu Animation

<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8">
	<title>Drop Down Menu</title>
	<link rel="stylesheet" href="style.css">

				<li><a href="#">Home</a></li>
				<li><a href="#">Shop</a>
					<li><a href="#">Men</a></li>
					<li><a href="#">Women</a></li>
					<li><a href="#">Kids</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Contact</a>
						<li><a href="#">Sales</a></li>
						<li><a href="#">Support</a></li>
						<li><a href="#">Return</a></li>
						<li><a href="#">Affiliates</a></li>
				<li><a href="#">Services</a></li>

CSS for Drop Down Menu Animation

	color: darkgray;
	font-family: sans-serif;
	box-sizing: border-box;

	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{
		opacity: 0;
		transform: translateY(-100px);
		background-color: white;

		opacity: 0;

		opacity: 1;
		transform: translate(0);

By Tube Mint

I am a YouTuber and I also do niche marketing. In the process of create my niche blog using WordPress, Drupal, and GatsbyJS, I learned a few things like html, css, JS, CMS, MVC frameworks, C++, Python, Ruby, MySQL, Windows and Linux. After some time.. I realized that I can share my knowledge with people on YouTube and through my blog. So, here I am. You can ask me if you have any question about these technologies.