Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
I’ve been meaning to work on this one for quite some time. I’ve seen so many questions about getting the submenus to stay visible for longer, not least in the comments on my own post How to Create Slim Horizontal Submenus, but no solutions. So this quick snack is to compliment that recipe on horizontal submenus and get them to stick around a bit (or a lot) longer.
Whilst I did work out a JS solution, I found it clunky and there were issues when using more than one submenu, so this solution I think works better and is easier to implement as it’s just CSS .
So let’s get cooking!
Cooking time
Literally 5 minutes!
Preparation
For the best effect, I suggest first following my recipe on How to Create Slim Horizontal Submenus. This does work on the standard format submenus but I think it just looks nicer with horizontal ones. Also the code currently only works when using the fade in animation for the submenus. I will work on the other animation effects when I get time.
Method
Not much to it really, we just need to add the following CSS. Here’s what we are doing:
Firstly, everything is wrapped in a media query as we only want this effect on desktop, not when the menu switches to the mobile version.
Our first declaration is modifying what happens to the submenus when the focus moves away from them, instead of them disappearing we are telling them to stay there.
Next we are setting the animation that happens when the focus moves away from the submenus, the 3s value is our delay, so increase or decrease this depending on how long you want your submenus visible for before they fade out.
The next declaration just sets the animation on hover, so the speed at which the submenus fade in.
And lastly, we’re using the general sibling combinator (that’s the squiggly line) to hide all the submenus except the one that has focus.
@media (min-width: 981px) { .et-dropdown-removing > ul { display: block !important; } .nav li ul { -webkit-transition: .4s ease-in-out 3s; transition: .4s ease-in-out 3s; } .nav li ul:hover { -webkit-transition: 0.4s ease-in-out 0s !important; transition: 0.4s ease-in-out 0s !important; } #et-top-navigation nav > ul > li:hover ~ .et-dropdown-removing > ul { display: none !important; } }
Copy and paste the CSS into your child theme stylesheet or Divi theme options custom CSS box.
And that’s it, pretty simple eh?
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.
Michelle X
I can’t seem to get this to work on this Staging site: http://highlandsrealp.staging.wpengine.com/about/
How can I change the drop-down menu animation?
Hi. Thank you for posting this. I’m looking for the JS that controls the submenu’s “ghost stickiness” time, for AFTER you roll off of it. It has about a one second delay where if you move your mouse off of the submenu to the right or left or bottom, you can quickly roll back to where the submenu disappeared from and the submenu appears again. I have some buttons on the page near the top menu that are hard to get to because the submenu is turning back on again when I move the mouse left to my page item… Read more »
This is just the CSS transition. You can adjust this by altering the following and placing in your child theme stylesheet:
.nav li li a {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
Hello,
Thanks for your post
I need the secondary menu items to always remain visible as on this site: https://www.ekotec.it/en/s/companies/videosurveillance-business/
Sorry, this recipe is for making them visible longer, not always.
I tried this on a mega-menu but it acts very strangely. Any suggestions?
Tim its not designed for mega-menu, that would have different classes and effect so the code would be different too
Did anyone figure out how to do this with the Divi mega-menu?
I was able to get this working for my mega menu using only the following:
@media (min-width: 981px) {
.et-dropdown-removing > ul { display: block}
}
.nav li, .nav li ul {-webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out}
.nav li:hover { -webkit-transition: 0.4s ease-in-out 0s !important; transition: 0.4s ease-in-out 0s !important}
Hey
Great!
Do you have an idea how I can make my submenu show all the time?
I’m learning and I really would like a menu like this.
Thanks
You can just use a very high number
Fantastic.
I somehow missed your horizontal sub-menu tutorial so combined they are so clever.
Thanks
Thanks Paul