[jQuery] Superfish - huge issue with IE6

[muskokee]

Hi Joel,

I am attempting to integrate superfish with my css menu.  IE6 looks
like a nightmare though!

I use different css for my menu than you have provided in the example
- I use visibility rather than tucking the ul levels up and away from
view.

When I turn the menu "on" (in my php script) so that Superfish is
activated, I remove the "visibility" portion and add your css (-999em)
so that they are compatible.

All of this works like a charm in real browsers, but IE6 creates a
complete mess of it.

Here is the css that is used when superfish is activated:


.wd_menu {padding:0; margin:0;}

.wd_menu li {float:left;position:relative;text-align:center;list-style-
type:none;}

.wd_menu a, .wd_menu a:visited {
display:block;
font-size:12px;
text-decoration:none;
color:#fff;
width:auto;
height:35px;
line-height:35px;
padding:0px 10px;
}
.wd_menu ul a span {}

.wd_menu li a.toplink:hover {color:#C0C0C0;background:#000;}
.wd_menu li:hover a.toplink {color:#C0C0C0;background:#000;}

/*removing the float, containing the items, assiging a border*/
.wd_menu li ul {height:auto;float:none;padding:0; margin:0;border:1px
solid #C9C9C9;}
.wd_menu ul li{text-align:left;}
.wd_menu ul a, .wd_menu ul a:visited {background:#f5f5f5; color:#000;
height:auto; line-height:14px; padding-top:5px; padding-bottom:
5px;width:100px;}
.wd_menu ul a:hover {background:#c0c0c0;}

.wd_menu ul a.drop, .wd_menu ul a.drop:visited {
background:#f5f5f5 url('arrow.png') right center no-repeat;
}
.wd_menu ul a.drop:hover{
background:#c0c0c0 url('arrow_hover.png') right center no-repeat;
}

.wd_menu li ul {
        top:-999em;
        position:absolute;
        width:120px;
}

/*level 1*/
.wd_menu li:hover ul, ul.wd_menu li.sfHover ul {left:-1px;top:35px;}
.wd_menu li:hover li ul,.wd_menu li.sfHover li ul {     top:-999em;}

/*level 2*/
.wd_menu li li:hover ul, ul.wd_menu li li.sfHover ul  {left:
120px;top:-1px;}
.wd_menu li li:hover li ul,.wd_menu li li.sfHover li ul {       top:-999em;}

/*level 3*/
.wd_menu li li li:hover ul, ul.wd_menu li li li.sfHover ul {left:
120px;top:-1px;}
.wd_menu li li li:hover li ul,.wd_menu li li li.sfHover li ul {
top:-999em;}

/*level 4*/
.wd_menu li li li li:hover ul, ul.wd_menu li li li li.sfHover ul {left:
120px;top:-1px;}
.wd_menu li li li li:hover li ul,.wd_menu li li li li.sfHover li ul {
top:-999em;}

/*level 5*/
.wd_menu li li li li li:hover ul, ul.wd_menu li li li li li.sfHover ul
{left:120px;top:-1px;}
.wd_menu li li li li li:hover li ul,.wd_menu li li li li li.sfHover li
ul {    top:-999em;}

.superfish li:hover ul,/*level 1*/
.superfish li li:hover ul,/*level 2*/
.superfish li li li:hover ul,/*level 3*/
.superfish li li li li:hover ul,/*level 4*/
.superfish li li li li li:hover ul  /*level 5*/ {
        top:-999em;
}

I am using just a regular call (i had the bgiframe in place but
removed it in case of some conflict - no difference!)

<script type="text/javascript">
$(document).ready(function(){
                $("ul.wd_menu").superfish({
                        hoverClass      : "sfHover",
                        currentClass    : "overideThisToUse", /*new to v1.2a*/
                        delay           : 500,
                        animation       : {opacity:"show",height:"show"},
                        speed           : "normal"
                });
        });
</script>

If you would like a url I would be happy to post one - just my dev
site.

Thanks a lot for any help you can offer.

Sheri