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!