Hi Bob,
You seem to be missing some very important CSS. The submenu ul
elements must be position absolute. Also, I don't see any 'top' or
'left' values or hover rules for them. Please refer to the original
demo CSS files for further clues.
Joel Birch
On 23/10/2008, Bob Sawyer <[EMAIL PROTECTED]> wrote:
>
> 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
>
