[jQuery] Superfish IE6
[jQuery] Superfish IE6
I could not find my previous post so I am posting it again. I am sorry
if this is in error
I just installed Superfish and its working great except for IE 6.
Before adding Superfish I had the Suckerfish version working, except
for IE6 of course.
My problem is that when I click on one of the four menu items the
bottom two move over to the right. Almost like they lose their
display:block. I have been round with this for a couple of hours now
and cant seem to find the trick which is probably staring me right in
the face. I searched the first four pages of this group with
'Superfish IE6' but did not find anything that helped.
I am using Google Blueprint's grid for the layout, but I dont think
that should cause any issues.
Thanks for any help.
Here is my CSS
/* START DROP DOWN */
li > ul {
top: auto;
left: auto;
}
ul.dropdown {
padding: 0;
margin: 0;
list-style: none;
}
ul.dropdown li {
float: right;
position: relative;
/*width: 10em;*/
}
ul.dropdown li ul {
display: none;
position: absolute;
top: 2em;
left: 0;
}
ul.dropdown li ul li {
background:#F08C2A;
text-align:left;
padding:5px;
width: 12em;
border-bottom:1px solid #F7A444;
}
ul.dropdown li ul li.last{
border:none;
background-color:#FFF;
background:url('../images/gr_menu_bottom.gif');
background-repeat:no-repeat;
line-height:9px;
}
ul.dropdown li ul li a:link,
ul.dropdown li ul li a:visited,
ul.dropdown li ul li a:hover,
ul.dropdown li ul li a:active
{
font-family:arial, sans-serif;
font-weight:bold;
font-size:90%;
color:#FFF;
text-decoration:none;
}
ul.dropdown li ul li a:hover {
color: #1665B0;
}
ul.dropdown li:hover ul, li.over { display: block; }
/* END DROP DOWN */
Here is my JS
$(document).ready(function()
{
$('ul.dropdown').superfish({
hoverClass: 'over',
autoArrows: false
});
});
And here is the HTML markup
<div class="span-8 last" id="navigation">
<table>
<tr>
<td class="l"><img src="images/gr_nav_left.jpg" /></td>
<td class="center">
<ul class="dropdown">
<li>
<a href="index.php?page=news">
<img src="images/btn_news.gif" alt="home" height="33"
width="63" />
</a>
</li>
<li>
<a href="index.php?page=partners">
<img src="images/btn_partners.gif" alt="home" height="33"
width="117" />
</a>
</li>
<li>
<a href="index.php?page=contact_us">
<img src="images/btn_contact_us.gif" alt="home" height="33"
width="134" />
</a>
</li>
<li>
<a href="index.php?page=about_us">
<img src="images/btn_about_us.gif" alt="home" height="33"
width="120" />
</a>
</li>
<li>
<a href="index.php?page=services">
<img src="images/btn_services.gif" alt="home" height="33"
width="105" />
</a>
<ul>
<li><a href="index.php?
page=services&service=contract_staffing">Contract Staffing</a></li>
<li><a href="index.php?
page=services&service=load_performance">Load Performance</a></li>
<li><a href="index.php?
page=services&service=project_outsourcing">Project Outsourcing</a></
li>
<li><a href="index.php?
page=services&service=test_automation">Test Automation</a></li>
<li class="last"></li>
</ul>
</li>
<li>
<a href="index.php?page=home">
<img src="images/btn_home.gif" alt="home" height="33"
width="66" />
</a>
</li>
</ul>
</td>
<td class="r"><img src="images/gr_nav_right.jpg" /></td>
</tr>
</table>
</div>