Suckerfish的兒子CSS導航菜單不工作在IE7

Question

沮喪的話，我無法讓IE7的下拉列表在父項下排隊。他們在其他瀏覽器中工作〜包括IE8〜IE7 ...

菜單的下拉部分在ie7中的父項的右側顯示。

任何人都可以幫忙嗎？

這裏是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; 
    } 

這裏是HTML：

<div id="mainnav"> 
    <ul> 
     <li class="first level-1"><a href="http://ccsind.com/"><span>Home</span></a></li> 
     <li class="level-1"><a href="about-us/"><span>About Us</span></a> 
      <ul> 
       <li class="first level-2"><a href="about-us/what-we-do.html"><span>What We Do</span></a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

非常沮喪.... -Sean

Answer 1

變化left: auto到left: 0：

#mainnav ul li:hover ul, #mainnav ul li.sfhover ul { 
    left: 0; 
} 

，並添加position: relative：

#mainnav ul li { 
    width: auto; 
    position: relative; 
}