You may wish to add a bit of transparency to the submenus or your menu bar. There are a couple of ways to do this, but I think rgba() colors are the best option.
Option 1: Opacity
CSS has a built in opacity property that can be added to any element. So it’s very easy to do this:
/* Submenus */
#megaMenu ul.sub-menu-1{
opacity:.8;
}
/* Menu Bar */
#megaMenu{
opacity:.8;
}
However, the way opacity works is that it affects all parts of the item (background, text, images, borders, etc), as well as all descendants of that element. Opacities also compound. This generally makes links hard to read, so it’s not optimal.
Option 2: rgba() background
A better solution is to use rgba() colors for the background. rgba() allows you to set an alpha value for your color, which is just like an opacity value, but only affects that color. So the solution is:
/* Sub menus */
#megaMenu ul.megaMenu > li.menu-item.ss-nav-menu-mega > ul.sub-menu-1,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu{
background: rgba( 0,0,0, .8);
}
/* Menu Bar */
#megaMenu{
background: rgba( 0,0,0, .8);
}
This solution gives an 80% opacity black background, but the images and text will remain fully opaque for easier reading. Most color pickers will give you rgb values, and then you can add your own alpha value.
Note that rgba() colors don’t work on IE8. I think just setting a solid background fallback is the best solution (I don’t recommend using IE filters, as they can be problematic), but you can use a transparent png repeated background if you prefer.