Sub Menu disappearing when trying to hover

I created a menu with sub-menu, yet when moving the cursor from hovering over the main menu item to the sub-menu item, it will disappear sometimes. I can’t figure out the CSS to fix this. From other forum support entries, I tried this, but its not working.

.masthead .x-navbar .desktop li:hover > .sub-menu {
display: block !important;
}
.x-navbar .desktop .x- nav ul li.menu-item-has-children:hover>.sub-menu {
display: block !important;
}

The site is dyventive.com.

Thanks in advance!

Hi There,

I’ve just checked your website and the submenu is working fine:

Could you please tell us which browsers & OS you’re using?

Thanks.

I’m using Windows 10 Home 64 bit & Chrome Version 64.0.3282.119 (Official Build) (64-bit).

The issue isnt that the dropdown menu isn’t appearing. There is a random issue where if you drag the cursor quickly, the sub-menu stays, but if you don’t the sub-menu disappears. I don’t know if its because of the 5 px border at the bottom or the header, but if you scroll over menu items as well, they sometimes don’t hyperlink. I figured the best way to show this is by creating a video.

Hi again,

Thank you for providing for the video, please add the following code in your Customizer:

.x-navbar .desktop .x-nav>li>a {
    line-height: inherit !important;
}
.x-navbar .desktop .x-nav>li:after {
    top: -4px !important;
}
.x-navbar .desktop .x-nav > li ul {
    top: 60px !important;
}

Let us know how this goes!

worked perfect. thanks!

You’re welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.