[jQuery] Superfish ie6 problem sfHover
I am using Superfish v1.4.1 - jQuery menu widget. I am implementing a
version that is exampled here: http://users.tpg.com.au/j_birch/plugins/superfish/richard-willis-example/
I have it working great on firefox, but am have a problem in IE6, that
I have spent a lot of time trying to fix.
First problem:
I am using different images when I hover over the top most links.
When I scroll down to the next level the image on my parent item
changes to the last one described in my css. Originally the code uses
the same background color, but I need different images. It was
telling the first <li> after nav to have the background color. I
changed it to a class for each <li> to distinct each image from
eachother. So know I scroll over button1 and get the button1 image I
want and the next horizontal menu appears. I then move the mouse over
the next horizontal menu and button1 then turns into button5 which is
the last one declared in my css. Here is the code:
Here is the css that changes the images on hover (I am using a sprite
for the images)
/* set the hotspots for each "button" */
.button1, .button1 a {left: 0; width: 89px; height:28px;
float:left;
display:block;
text-decoration:none;} /* manga */
.button2, .button2 a {left: 90px; width: 90px; height:28px;
float:left;
display:block;
text-decoration:none;} /* video */
.button3, .button3 a {left: 178px; width: 92px; height:28px;
float:left;
display:block;
text-decoration:none;} /* people */
.button4, .button4 a {left: 270px; width: 103px; height:28px;
float:left;
display:block;
text-decoration:none;} /* lifestyle */
.button5, .button5 a {left: 374px; width: 75px; height:28px;
float:left;
display:block;
text-decoration:none;} /* shop */
/***set hovers for hotspots***/
.nav .button1:hover,
.nav .button1.sfHover,
.button1 a:focus, .button1 a:hover, .button1 a:active {
background: transparent url("../menu_sprite.gif") 0 -30px no-repeat;
}
.nav .button2:hover,
.nav .button2.sfHover,
.button2 a:focus, .button2 a:hover, .button2 a:active {
background: transparent url("../menu_sprite.gif") -89px -61px no-
repeat;
}
.nav .button3:hover,
.nav .button3.sfHover,
.button3 a:focus, .button3 a:hover, .button3 a:active {
background: transparent url("../menu_sprite.gif") -179px -30px no-
repeat;
}
.nav .button4:hover,
.nav .button4.sfHover,
.button4 a:focus, .button4 a:hover, .button4 a:active {
background: transparent url("../menu_sprite.gif") -271px -61px no-
repeat;
}
.nav .button5:hover,
.nav .button5.sfHover,
.button5 a:focus, .button5 a:hover, .button5 a:active {
background: transparent url("../menu_sprite.gif") -374px -30px no-
repeat;
}
Here is the code(to simplify I have removed the drop down menu code):
<ul class="nav">
<li class="button1">
<a href="#"></a>
<ul class="horizontal_menu1">
</ul>
</li>
<li class="button2">
<a href="#"></a>
<ul class="horizontal_menu2">
</ul>
</li>
<li class="button3">
<a href="#"></a>
<ul class="horizontal_menu3">
</ul>
</li>
<li class="button4">
<a href="#"></a>
<ul class="horizontal_menu4">
</ul>
</li>
<li class="button5">
<a href="#"></a>
<ul class="horizontal_menu5">
</ul>
</li>
</ul>
Any ideas? I have tried many many different ones all with the same
outcome, that IE6 just does not want to work.
Thanks