[jQuery] Re: superfish + bgiframe problem on IE6

[Bob Sawyer]

So, the problem I'm having with IE6/Superfish is that the dropdown
menus push all other content down, rather than displaying on top of
the other content.

My superFish code is fairly straightforward:

$(document).ready(function() {
        //superFish
        $('ul#menu').superfish({
                animation : { opacity:"show",height:"show"},
                pathClass: "current",
                speed: "fast"
        });
        $('ul#menu').superfish().find('ul').bgIframe({opacity:false});
});

Removing either line makes no difference -- the result is the same,
and obviously having both in there is probably overkill.

My menu is pretty lightweight:

<div id="nav" class="grid_12">
        <ul id="menu">
                <li class="current"><a href="/home" title="Home">Home</a></li>
                <li><a href="/collections" title="Collections">Collections</a>
                        <ul>
                                <li><a href="/collections/collection/fall2008" 
title="Fall
2008">Fall 2008</a></li>
                                <li><a 
href="/collections/collection/spring2009" title="Spring
2009">Spring 2009</a></li>
                        </ul>
                </li>
                <li><a href="/about" title="About Us">About Us</a>
                        <ul>
                                <li><a href="/news" title="News">News</a></li>
                                <li><a href="/press" 
title="Press">Press</a></li>
                        </ul>
                </li>
                <li><a href="/contact" title="Contact Us">Contact Us</a></li>
        </ul>
</div>

I stripped the existing superfish.css down to only the Essential
Styles and "apply hovers to modern browsers" sections; otherwise the
CSS is pretty straightforward as well:

#nav {
        width: 960px;
        height: 40px;
        background: transparent url(/images/nav_bg.gif) 0px 0px no-repeat;
        display: block;
        position: relative;
        margin: 15px 0 0 0;
        z-index: 100;
}

#menu li {position: relative; display:block; float: left; height:
40px; margin: 0; padding: 0; font-size: 16px; line-height: 40px; }
#menu li a {position: relative; display: block; float: left; color:
#64a3b5;text-decoration: none; height: 40px; padding: 0 20px; }
#menu li a:link { color: #64a3b5; }
#menu li a:hover { color: #000; background: #dfdfdf; }
#menu li.current a { color: #333; }

#menu ul {display: block; background-color: #f0e9f1; border-bottom:
1px solid #ccc; margin: 0; padding: 0; clear: both; width: 130px;}

#menu ul li {position: relative; display: block; float: none; height:
30px; margin: 0; padding: 0; line-height: 30px; font-size: 90%;}
#menu ul li a {position: relative; display: block; float: none; color:
#64a3b5; text-decoration: none; height: 30px; margin: 0; padding: 0 0
0 15px; z-index: 120;}
#menu ul li a:hover { color: #000; background: #dfdfdf; }
#menu ul li.current a { color: #333; }

Any ideas?

Thanks,
Bob