menu hover effect

I just added a hover effect on nav menu in custom css.When hovering, my submenu should slide down one by one.However,my submenu will all popout and slide down one by one at the same time.

I am not sure if it’s because theme’s pre-defined hover setting,
or bugs in my codes.

theme:avada
demo:creative
hover code(css):

.fusion-dropdown-menu:hover li{
	animation: load .8s forwards;
	display:block;
	background:#000000;
	perspective:1000px;
}

@keyframes load{
	0%{
		opacity:0 !important;
		transform:translateY(-60px)  scale(0.3) rotateY(250deg);
	}
	30%{
		opacity:0 !important;
	}

	100%{
		opacity:1 !important;
		transform:translateY(0px)  scale(1)   rotateY(360deg);
	}
}

.fusion-dropdown-menu li:nth-child{
	animation-delay: 0;
}

.fusion-dropdown-menu li:nth-child(2){
	animation-delay: .15s;
}

.fusion-dropdown-menu li:nth-child(3){
	animation-delay: 0.3s;
}

.fusion-dropdown-menu li:nth-child(4){
	animation-delay: .45s;
}

The page I need help with: [log in to see the link]