[Resolved] Mega Menu Issues

[Gary]

I am using the CSS mega menu on my website and am having some issues. When you hover over the main menu items everything works as it should but if you mouse click on one of the main menu items like “Governance” or “Programs”, that dropdown menu shows but then when you hover on one of the other main menu items it keeps showing the menu that was clicked on and you can see part of the other menu behind it. Any help would be greatly appreciated.

Thanks,
Gary

[Tom]

Hi there,

This happens because the menu item you clicked on is still “active”. It’s an accessibility thing that makes the menu accessible to keyboards.

If you need to disable it, you can do this:

.dropdown-hover .main-navigation:not(.toggled) ul li.sfHover:not(:hover) > ul {
    left: -999px;
    opacity: 0;
    transition-delay: 0;
    pointer-events: none;
    height: 0;
    overflow: hidden;
}

[Gary]

Hi Tom,

Once again you nailed it on the first crack. Works perfect now!

Thanks again for the awesome support. You guys are the best!

Gary

[Tom]

Glad I could help 🙂

[Author]

Posts