Question

I’m working on this website for a company and I’m having issues with the CSS in IE8 that allows the sub menus to appear when you hover over the navigation tabs.

http://kabenwireless.net/

When you hover over some of the menu items in the navigation, there is supposed to be a sub menu that appears. This does not work in IE8, but it does work in all other browsers other than IE.

Any help is appreciated in getting these styles to work in IE8.

Answer 1

The biggest problem is that on #access, you’re using filter for opacity:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
filter: alpha(opacity=95);

Using those filters causes an overflow: hidden-esque effect. It’s like #access has overflow: hidden. You can see why that would stop your submenus showing up.

You need to either not use opacity for IE, or you need to refactor how you’re applying the opacity bearing in mind the overflow: hidden effect.

Applying the opacity to only the dropdowns would probably work.

Maybe CSS3 PIE (which you’re already using) can help you. Look up how to do rgba with it, it’s something like -pie-background: rgba(0,0,0,0.5).

---

You can quickly verify what I’m saying as true by:

• Opening your site in IE8.
• Pressing F12 to open the Developer Tools.
• Inspecting <div id="access">.
• Unticking the filter rule in the right-hand panel.