I have solved the problem listed below by adding a width to the secondary UL
Ul.dropdown li ul {
display: none;
position: absolute;
top: 2em;
left: 0;
width:12em;
}
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of rhythmicde...@gmail.com
Sent: Thursday, January 29, 2009 5:14 PM
To: jQuery (English)
Subject: [jQuery] Superfish IE6
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>
