How to Create a Custom Submenu Animation Effect Using CSS and Elementor

Here at ‘Power of the Web,’ we take pride in providing practical and innovative solutions to web design challenges. This time, we’ve crafted a custom CSS solution for a seamless and intriguing Elementor drop-down menu effect.

Check out the video for insights, and you’ll find the CSS code right below!

				
					.elementor-nav-menu--main .menu-item-has-children {
    position: relative;
}

.elementor-nav-menu--main .menu-item-has-children::after {
    content: '' !important;
    position: absolute !important;
    top: 100%;
    left: 0 ;
    height: 100px ; 
    width: 100% ;
    z-index: 1 ;
    border-left: 0px;
}

.elementor-nav-menu--main .elementor-nav-menu--dropdown {
    display: none;
    opacity: 0;
    width: 280px !important; /* Adjust menu width here */
    transition: all 0.3s ease-in-out;
    animation-name: dropDown;
    animation-duration: 0.3s; /* Adjust timing here */
    animation-fill-mode: forwards;
    z-index: 2; 
}

.elementor-nav-menu--main .menu-item-has-children:hover > .elementor-nav-menu--dropdown {
    display: block;
}

/* This targets the third-level submenu */
.elementor-nav-menu--main .elementor-nav-menu--dropdown .elementor-nav-menu--dropdown {
    left: 50%; /* This positions the third-level submenu to the right of the second-level submenu */
    top: -40px
    transform: none !important; /* Reset any inherited transformation */
}

.elementor-nav-menu--main .menu-item-has-children:hover > .elementor-nav-menu--dropdown {
    display: block;
}

@keyframes dropDown {
    0% {
        opacity: 0;
        transform: translateY(0); /* Change this to change direction */
    }
    100% {
        opacity: 1;
        transform: translateY(-10px); /* Change this to change direction */
    }
}
				
			

No Comments yet!

Your Email address will not be published.

Recent Articles

Vision Strain: My Journey to Visual Builders
Why Your Website is More Vital Than Ever
How to Create a Mega Menu Animation Effect Using CSS and Elementor
Unveiling Our Latest Project: The Transformation of Whiparound.com
How to Create a Custom Submenu Animation Effect Using CSS and Elementor
Crafting Color Palettes in Elementor - A 10-Minute Elementor and Coolors Guide
Designing Custom Headers in Elementor: A Quick 30 Minute Tutorial
Quick and Fun Web Design: Master Elementor Headers in 20 Minutes or Less
Unleash Your Creativity with "Intro to Elementor by Power of the Web"
Using AI to write Killer Emails that Work
Packy Savvenas
Packy Savvenas

Packy Savvenas is a senior web designer that helps online businesses achieve their goals by creating and developing websites that reach more customers and sell more products.