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

In our pursuit to empower you with distinctive web design tools and tips, we’re excited to share a unique solution: creating custom submenu animation effects using CSS and Elementor on WordPress. Believe it or not, our search showed a surprising lack of information on this particular topic online. Therefore, we decided to fill that gap ourselves.

Here at ‘Power of the Web,’ we take pride in providing practical, innovative solutions to web design problems. This time, we’ve concocted custom CSS code for a seamless and intriguing Elementor drop-down menu effect. This new trick isn’t just an addition to our arsenal of skills, but an exclusive secret we’re sharing with you. Be among the first to implement this game-changing feature on your website and redefine the user experience like never before.

In our Elementary Training Series, we walk you through each step of this process in an easy-to-follow guide. There’s something for everyone, whether you’re a beginner or a seasoned developer. Come and join us on this revolutionary journey!

So, head over to our YouTube channel @poweroftheweb to watch the tutorial. Don’t forget to subscribe to stay updated with more insightful #Elementor #WebDesign #PowerOfTheWeb!

Here is the CSS I’m using in this tutorial:

					.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;

@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!

Recent Articles

Unveiling Our Latest Project: The Transformation of
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
Top Tools and Resources Every Web Designer Needs
How to Incorporate Bootstrap's Latest Version into Your WordPress Custom Theme
The Importance of Naming Images in WordPress: Tips and Best Practices
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.