The problem you have is due to the terrible IE implementation of opacity. IE actually uses DirectX 2D filters to render opacity, along with a whole bevy of completely proprietary filters and transitions. See this page for reference:
http://msdn.microsoft.com/en-us/library/ms532847(VS.85).aspx HOWEVER, when any DX filter is applied to an element, any child elements that are absolutely positioned outside the boundries are not rendered. You can test this: div.box1 { position:relative; width:100px; height:100px; background-color:red; filter:alpha(opacity=50); opacity:0.5; } div.box2 { position:relative; width:100px; height:100px; left:50px; top:50px; background-color:blue; filter:alpha(opacity=50); opacity:0.5; } <div class="box1"> <div class="box2"></div> </div> And you'll see that box2 is chopped off by the boundaries of box1. The workarounds for this are NOT pretty, and require some custom work. For example, one solution is for both box1 and box2 to be siblings, rather than children. And have a mouseover event on box1 fire visibility on box2. But you can't use the default mouseenter/mouseleave events, because the two elements have no parent/child relationship. So you have to roll your own. Something like this (note this is not cut-and-paste ready code, just trying to give an idea of how this would work) var box1 = $('div.box1'); var box2 = $('div.box2'); box2[0].$parentNode = box1[0]; box1.bind('mouseover',showChild).bind('mouseout',hideChild); function showChild(e) { // Check if mouse(over|out) are still within the same parent element var parent = event.relatedTarget; // Traverse up the tree while ( parent && parent != elem ) try { parent = parent.$parentNode||parent.parentNode; } catch(error) { parent = elem; } // Return true if we actually just moused on to a sub-element if (parent==elem) return false; // Now show the child element. } Note that the code is walking up the tree by checking for $parentNode first, and if it doesn't find it, using the default parentNode property. It sort of "fakes" the hierarchy, as it makes the code think that box2 is a child of box1, when it really isn't. Again, this is ugly, but one workaround for IE. JK -----Original Message----- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of jaredh123 Sent: Tuesday, November 18, 2008 4:08 PM To: jquery-en@googlegroups.com Subject: [jQuery] Re: jQuery css opacity and 2nd level suckerfish menus... ok, i put up two fully functional, self-contained test pages that demonstrate the problem: http://netrivetsandbox.com/jquery/test.html (with jQuery opacity rule) http://netrivetsandbox.com/jquery/test2.html (without jQuery opacity rule) compare in non-IE and IE and see that the first doesn't work in IE and the second does -- View this message in context: http://www.nabble.com/jQuery-css-opacity-and-2nd-level-suckerfish-menus...-t p20568430s27240p20571094.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
