How to animate the submenu

With a little bit of CSS, we can easily add some effets. Just add a new class to the menu (.menu1, .menu2...) and use these CSS :

@keyframes oxy-menu-moveup {
	from {
		opacity: 0;
		transform: translateY(50px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.menu1.oxy-nav-menu .menu-item:hover > .sub-menu {
	animation-name:oxy-menu-moveup;
	animation-duration:0.5s;
}

Or even add a cool 3D effect :

@keyframes oxy-menu-rotx {
	from {
		opacity: 0;
		transform: rotatex(90deg);
	}
	to {
		opacity: 1;
		transform: rotatex(0deg);
	}
}
.menu2.oxy-nav-menu .menu-item {
	perspective: 800px;

}
.menu2.oxy-nav-menu .menu-item:hover > .sub-menu {
	animation-name:oxy-menu-rotx;
	transform-origin: top;
	animation-duration:0.5s;
}

Just change the rotation to -90deg :

@keyframes oxy-menu-rotx {
	from {
		opacity: 0;
		transform: rotatex(-90deg);
	}
	to {
		opacity: 1;
		transform: rotatex(0deg);
	}
}
.menu3.oxy-nav-menu .menu-item {
	perspective: 800px;

}
.menu3.oxy-nav-menu .menu-item:hover > .sub-menu {
	animation-name:oxy-menu-rotx;
	transform-origin: top;
	animation-duration:0.5s;
}

For more effect, check the tranform property : 
https://developer.mozilla.org/en-US/docs/Web/CSS/transform

And if you are already using the Animate.css library (or another similar library), you can use their classes and make some funky/weird effect :

.menu4.oxy-nav-menu .menu-item:hover > .sub-menu {
	animation-name:jackInTheBox;
	animation-duration:0.5s;
}