Suckerfish의 아들 IE7에서 작동하지 않는 CSS 탐색 메뉴

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> 

그래서 좌절 .... - 션

Answer 1

변경 left: autoleft: 0에 :

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

및 추가 position: relative :

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