Weird white background happens when I roll off a sub-menu link

I was having this same issue today when customizing the menu. The culprit was some CSS from my Theme files (Customized Drupal Bootstrap)... Not sure if it will work for you, thought.

/sites/all/themes/bootstrap/css/style.css
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color:#eee; border-color:#f58220; }

This also happens in IE7 and IE9 but not IE10.

In IE7, I managed to get rid of the unwanted blue background with:
#region-menu li,
#region-menu a,
#region-menu a:active,
#region-menu a:hover,
#region-menu a:focus
{
background-color: transparent !important;
background-image: none !important;
background: none !important;
}

But even something as radical as this did not get rid of them in IE8 and 9!

For information, I combed through the megamenu module css and some bootstrap css and found loads of styles that seemed to either set blue backgrounds or 'inherit' backgrounds on 'a' elements targeted by various structures of parent elements within megamenu. I reused all these selector and tried to cancel the style out by setting background-color: transparent !important; on them but nothing worked :(

My hat off to anyone who finds the cause of this unwanted style!

Phew, that was a bugger. I think I found the problem in the module's base.css. It is using the MS custom filter property to try to do a gradient for IE8 and 9, not background-image or background-color.

I added the following in my theme's css file to fix it up.

#menu-bar .tb-megamenu .dropdown-menu .active > a,
.tb-megamenu .dropdown-menu .active > a:hover ,
.tb-megamenu .dropdown-menu li > a:hover,
.tb-megamenu .dropdown-menu li > a:focus,
.tb-megamenu .dropdown-submenu:hover > a {
	filter: none;/*overrides the blue gradients found in base.css */
}

I hope that helps!
Heidi

@hwasem thanks for the awesome fix, spent hours to find the culprit.

Awesome, thank you, thank you, thank you! The solution in #4 works for me.

The issue with filters may be one problem, but there is a separate issue with the way the module applies some JS effects (that should probably only target top-level items) too broadly. If removing the MS filters (as per #4) does not fix your problem, you may want to check out #2299463: "open, animating" classes added to entire site menus. .

i have the same problem but neither of these fixes work for me. anyone got any ideas?

I had the same problem. The font-color changes to white which is the same as the sub-menu's background color. I used the following for a quick fix: (you can use any color you like)

.tb-megamenu .mega-nav > li a, .tb-megamenu .dropdown-menu .mega-nav > li a {
color:#052742;
}

.tb-megamenu .mega-nav > li a, .tb-megamenu .dropdown-menu .mega-nav > li a:hover {
background-color:#fff;
color:#31a4be;
}

#9 Works for me, thanks a lot!

Been working on this module recently and experienced the same problem. None of the listed solutions worked, so if you're struggling with the same issue please note the following comments to help you save time.

1. CeriumSoft performed an extensive review of the issue and confirmed the flickering color is definitely #fff and not one of the other off-whites used in this scheme.
2. There is no way to alter the flickering in the CSS (either default, bootstrap, base, or alternate colors) - stop looking now!
3. The solution offered by sgold8670 in #9 works for the submenus, but doesn't affect the main navbar. Ultimately it's a reasonable work-around, but it's only effective if you're happy to have a white background on the drop-down.
4. The JS could well be responsible for this, but we didn't spend more time investigating after the above patches failed.
5. If you stick to the themes included within the module then the flickering doesn't matter that much - however if you are custom styling to match your brand identity then you might want to consider another module

Final summary...
If you're a stickler for detail like me then you'll find the flicker annoying (whether its the blue, black or, white version). We've got a blue gradient on our custom theme so it stood out like a sore thumb, but a few people I showed it do didn't think it really mattered.
Ultimately it comes down to personal preference, but for the use case we were working on it wasn't appropriate, so we switched to we_megamenu.

@andyscott, you've seen this issue very recently. Do you have any more information on how to recreate the issue? It might help to know what browser/OS you're using, what theme, and if possible see a video of the issue. I haven't been able to recreate it.

@knaffles - Sorry to say we've removed it from the site so I can't get you a video. We were getting it on all major browsers (firefox, edge, opera, safari, chrome) and on mac, win10, and linux systems. All we did to create the issues was update the css in the menubar to fit our branding (which has a bluey purple gradient). The white flicker was fairly obvious on our background, but perhaps with one of the built in backgrounds that are pre-loaded on the menu it doesn't matter that much.

Thanks for the report and for contributing to the TB Mega Menu issue queue.

Drupal 7 reached end of life on January 5, 2025 and is no longer supported going forward.

As part of wrapping up Drupal 7 support for this project, issues that do not include a code-based resolution (including issues where the only patch is out of date and requires a re-roll) are being closed as Outdated as part of this cleanup.

This closure reflects the end-of-life status of Drupal 7 and the absence of an up-to-date fix we can act on, not the validity of the issue itself.

If the issue applies to a currently supported version of Drupal, please open a new issue with updated details.

Thanks again to everyone who contributed during Drupal 7’s lifecycle.