Jump to content

Ie Problems With Multi-level Css Dropdown Menu Using Opacity

Recommended Posts

I have created a multi-level CSS dropdown menu. When a user hovers over the main link, a drop down menu appears, and some of the links on the dropdown menu create a horizontal flyout menu. There is a 90% opacity applied to the entire menu. This is what the opacity css looks like:.internalNav ul li ul { display:inline; height:100%; position:absolute; float:left; opacity:.90; filter:alpha(opacity=90);}The problem is when "filter:alpha(opacity=90);" is applied, the second level flyout menus disappear. Removing "filter:alpha(opacity=90);" will result in the flyout menus working perfectly in IE6 and IE7. It doesn't matter what # the opacity is set to, as long as there is a "filter:" it will not work in IE6 or IE7 (except filter:none).To be clear, the first level drop down is transparent and does work in both IE's. But when you hover over an element that should spawn a flyout menu, it doesn't work.I've tried setting filter:none to other elements after the main container with no luck, thinking the opacity might have been growing with inheritance.No luck with filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);No luck with changing the "position" and "display" to any combination I can think of.If anyone has solution, then please help me.Thanks in advance.........

Link to post
Share on other sites

If I remove opacity rule, then there is no change with the problem.One another problem that I have facing now is that the first level menu is working perfect in all browser.But second level menu (Sub Menu) is not working in IE. Although in Mozila Firefox it is working perfect.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...