this worked for me http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/
On Dec 17 2008, 11:30 am, Jamie Krug <jamiek...@gmail.com> wrote: > Hi, > > I'm fairly new to jQuery and not a terribly strong JavaScript guy. I > was excited to style up my own Superfish (http://users.tpg.com.au/ > j_birch/plugins/superfish/) navigation menu, and it even looked good > in IE! But my current design requires a div with a position:relative > below the navigation on a few pages, and this causes that div to show > through my Superfish drop-down in Internet Explorer 6 and 7 (Firefox > on both Linux and Windows looks great still). > > If anyone could help me out, it would be most appreciated. I've spent > hours already narrowing things down to find the cause of the issue and > can reproduce it with position:relative or postion:absolute. I've also > read a bit more on bgiframe, wondering if that could help, but it > seems that's just for covering select form fields (which is doing it's > job!). > > You can see a screen shot of the problem > here:http://www.thekrugs.com/superfish-ie-issue/scr-superfish-ie-issue.png > > My test page to reproduce the problem is > here:http://www.thekrugs.com/superfish-ie-issue/index.html > > And below is the page source of my test page... > > Many thanks in advance! > > Jamie > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> > <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> > <head> > <title>Superfish test</title> > > <link rel="stylesheet" type="text/css" media="screen" > href="superfish.css" /> > > <script type="text/javascript" src="jquery-1.2.6.min.js"></script> > <script type="text/javascript" src="hoverIntent.js"></script> > <script type="text/javascript" src="jquery.bgiframe.min.js"></script> > <script type="text/javascript" src="superfish.js"></script> > > <script type="text/javascript"> > $(document).ready(function(){ > $("ul.sf-menu").superfish().find('ul').bgIframe > ({opacity:false}); > }); > </script> > > </head> > > <body> > > <ul class="sf-menu"> > <li><a href="#">menu item</a> > <ul> > <li><a href="#">menu item</a></li> > <li><a href="#">menu item</a></li> > </ul> > </li> > <li><a href="#">menu item</a></li> > </ul> > > <div style="clear:both;"></div> > > <div style="position:relative; border:1px solid red; margin:5px; > padding:5px;"> > Test > </div> > > </body> > </html>
