Son of Suckerfish CSS Navigation Menus not working in IE7 - css

Question

Frustrated beyond all words, I am having trouble getting the drop downs in IE7 to line up under the parent item. They work in every other browser ~ including IE8 ~ but IE7...
The drop down part of the menu displays off to the right of the parent item in ie7.
can anyone help?
Here is the css:
/* ----------------------------------- navigation ----------------------------------------- */
/* ----------------------------------- main ----------------------------------------- */
#mainnav ul, #mainnav ul li, #mainnav ul li a {display:block;float:left;list-style:none;width:100%;margin:0;padding:0;}
#mainnav ul li {
width:auto;
}
#mainnav ul li a {
width:auto;
color:#000;
text-decoration:none;
font: 400 14pt/52px 'Crimson Text', serif;
text-transform: uppercase;
overflow:hidden;
display:block;
float:left;
}
#mainnav ul li a span {
display:inline;
float:left;
cursor:pointer;
overflow:hidden;
padding:0px 18px 0px 0px;
margin: 0px 0px 0px 18px;
}
#mainnav ul li:hover, #mainnav ul li a:hover, #mainnav ul li.active a {
color:#fff;
background:transparent url(/assets/images/layout/nav-button-sprite.png) no-repeat top left;
}
#mainnav ul li:hover a span, #mainnav ul li a:hover span, #mainnav ul li.active a span {
background:transparent url(/assets/images/layout/nav-button-sprite.png) no-repeat right top;
color:#fff;
}
/* ----------------------------------- navigation ----------------------------------------- */
/* ----------------------------------- drop downs ----------------------------------------- */
#mainnav ul li ul { /* second-level lists */
position: absolute;
background: url(/assets/images/layout/drop-down-seventy-percent.png) repeat;
width: 208px;
top:52px;
float:left;
left: -9999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#mainnav ul li ul li a,
#mainnav ul li ul li a span,
#mainnav ul li ul li a:hover,
#mainnav ul li ul li a:hover span {
padding:0;
margin:0;
background-image:none;
color:#fff;
font: 12px/16px Arial, Helvetica, sans-serif;
text-transform: capitalize;
}
#mainnav ul li ul li a,
#mainnav ul li ul li a span {background-image:none !important;}
#mainnav ul li ul li a span, #mainnav ul li ul li a:hover span {width:200px;padding:4px 0px 4px 8px;}
#mainnav ul li ul li a:hover span {background-color:#88273c;}
#mainnav ul li:hover ul, #mainnav ul li.sfhover ul {
left: auto;
}
and here is the html:
<div id="mainnav">
<ul>
<li class="first level-1"><span>Home</span></li>
<li class="level-1"><span>About Us</span>
<ul>
<li class="first level-2"><span>What We Do</span></li>
</ul>
</li>
</ul>
</div>
so frustrated....
-sean

Answer 1

Change left: auto to left: 0:
#mainnav ul li:hover ul, #mainnav ul li.sfhover ul {
left: 0;
}
and add position: relative:
#mainnav ul li {
width: auto;
position: relative;
}