how to replace oringinal menu hover effect(themes pre-defined)

I just added a hover effect on nav menu.When hovering, my submenu will slide down one by one.But I guess due to themes pre-defined(all submenu will popout at once),these two hover effect will be executed at the same time.But I only want the one I added.

Only way I could found so far is to build a brand new one myself.
Wonering if there is more convenient solutions?

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

.fusion-dropdown-menu:hover li{
	z-index:5000;
	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:1 !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){
	animati

on-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]