[Resolved] Submenu disappears too quickly

[Re]

I am using the mega menu styling technique I found in the Generate Press knowledge base to create a full-width 4-column menu on my site. The problem is that when the user’s mouse leaves the parent navigation item diagonally, to get to the first column menu items, the menu disappears too quickly. Is there any way to increase the exit delay of the sub navigation menus?

[Tom]

Since the navigation uses pure CSS now instead of javascript, I’m not sure if it’s possible to set a delay.

I’ll do some digging today and will get back to you.

[Tom]

Just played with a for a second, maybe try this:

.main-navigation ul ul {
    transition-delay: 300ms;
    height: auto;
}

[Re]

Brilliant! This works perfectly. Thanks Tom!

[Tom]

You’re welcome 🙂

[Jessica]

Hi, i have the same problem at http://wp12076150.server-he.de/

Adding following code doesn´t work:

.main-navigation ul ul {
transition-delay: 300ms;
height: auto;
}

What did i wrong?

Thanks for help!

[David]

Hi there,

the issue arises because you’re using this CSS to add top margin to the menu:

.main-navigation ul {
    margin-top: 22px !important;
}

Margins create a space between elements, so the mouse loses hover focus as you cross the gap.

Remove that CSS and try this instead:

.main-navigation .main-nav ul li.menu-item-has-children > a {
    padding-bottom: 22px;
}

[Jessica]

Thanks for the fast help!

Now the submenu works, but the position of Main Nav and Submenu are wrong

You understand my problem?

[David]

The URL you have provided is timing out ?

[Jessica]

Sorry: http://wp12076150.server-he.de/?p=1

[David]

What about this:

.main-navigation .main-nav ul li.menu-item-has-children > a {
    padding-bottom: 22px;
    padding-top: 22px;
    margin-top: 22px;
}

[Jessica]

thanks, the space between first entry is a little bit to big, but think i can use this. 🙂

[David]

Glad to be of help

[Author]

Posts