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

Table of Contents

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 */
Picture of Packy Savvenas
Packy Savvenas

Packy Savvenas is an 10X web designer, committed to elevating your online business to achieve its ambitious targets! By transforming and enhancing websites, he promises to broaden your customer base and dramatically increase your product sales. Prepare to upgrade your online presence and watch your business take flight!

No Comments yet!

Your Email address will not be published.