[jQuery] Superfish - huge issue with IE6
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