0

I am making the theme css for a site built with drupal 7 that uses megamenu.

In IE 7/8/9 (but not IE10) the menu items (a elements) have a blue background when you hover on them but I cannot identify the css rule that causes this style in order to cancel it out. The issue is flagged on drupal.org with screenshots (https://drupal.org/node/2106415) but no solution yet.

I combed through the megamenu module css and also through some bootstrap based theme css, found a whole lot of styles that seemed to apply blue or 'inherit' backgrounds to megamenu elements selected by a variety of hover states and/or active parent elements, copied every single of these selectors and tried to cancel the blue background by applying to all of them:

background-color: transparent !important;
background-image: none !important;
background: none !important;

With no success.

In desperation I tried (#region-menu is the container inside which my megamenu is)

#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;
}

and this got rid of the hover state blue backgrounds in IE7 but not in IE8/9!

Then I tried to force the IE debugger to identify where the style comes from. I tried this trick: Is there a way to test CSS :hover in IE Developer tools? but when I got the style to show, the traced style showed my rule above as active, even though IE showed the blue background, not a transparent background.

I'm at a complete loss and my hat off to anyone who finds out what causes this blue background!

Community
  • 1
  • 1
MelanieMenard
  • 13
  • 1
  • 3

1 Answers1

0

The style causing the unwanted blue background is in modules\tb_megamenu\css\base.css line 230 and 245

Just removing the background image and color (like I tried previously) only works in IE7. To remove the blue background in IE8/9, you need to reset the filter to remove the gradient.

This fixed it in IE7/8/9 for me:

.tb-megamenu .dropdown-menu li > a:hover,
.tb-megamenu .dropdown-menu li > a:focus,
.tb-megamenu .dropdown-submenu:hover > a ,
.tb-megamenu .dropdown-menu .active > a,
.tb-megamenu .dropdown-menu .active > a:hover
{
    background-color: transparent !important;
    background-image: none !important;
    filter: alpha(opacity=100);
}
MelanieMenard
  • 13
  • 1
  • 3