Q15: Make your submenus visible for longer

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!

Ingredients

The Divi Theme from Elegant Themes

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