IE 7中的CSS z-index錯誤

我在IE 7中遇到z-index問題。問題是菜單項是2行。如果任何第一行項目有子菜單，IE7不會讓你懸停它。該問題僅由IE7引起。IE 7中的CSS z-index錯誤

這裏是我的代碼：

<div id="wrapper"> 

    <div id="main-nav"> 
     <ul class="main-menu" id="menu-header-menu"> 
      <li class="menu-item"><a href="#">item 1</a> 
       <ul class="sub-menu"> 
        <li class="menu-item"><a href="#"> sub item</a> 
         <ul class="sub-menu"> 
          <li class="menu-item"><a href="#">sub sub item</a></li> 
          <li class="menu-item"><a href="#">sub sub item</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 

      <li class="menu-item"><a href="#">item 2</a></li> 
      <li class="menu-item"><a href="#">item 3</a></li> 
      <li class="menu-item"><a href="#"> test item</a> 
        <ul class="sub-menu"> 
         <li class="menu-item"><a href="#">sub sub item</a></li> 
         <li class="menu-item"><a href="#">sub sub item</a></li> 
        </ul> 
      </li> 
     </ul> 
    </div> 
</div>

CSS：

#wrapper { 
    width:250px; 
    margin:0 auto; 

} 
#main-nav { 
    background-color:orange; 
    padding: 0 10px;  
    clear: both; 
    display: block; 
    float: left; 
    width: 100%;  
} 

#main-nav ul { 
    list-style: none; 
    margin: 0 0 0 -0.8125em; 
    padding-left: 0; 
} 
#main-nav li { 
    float: left; 
    position: relative; 
} 

#main-nav a { 
    color:#737373; 
    display: block; 
    line-height: 2.333em; 
    padding: 0 1.2125em; 
    text-decoration: none; 
} 
#main-nav ul ul { 
    display: none; 
    float: left; 
    margin: 0; 
    position: absolute; 
    top: 2.333em; 
    left: 0; 
    width: 188px; 
    z-index: 999; 
} 
#main-nav ul ul ul { 
    left: 100%; 
    top: 0; 
} 
#main-nav ul ul a { 
    background: yellow; 

    height: auto; 
    line-height: 1.4em; 
    padding: 10px 10px; 
    width: 168px; 
} 

#main-nav li:hover > a, 
#main-nav a:focus { 
    color: #373737; 
} 

#main-nav ul li:hover > ul { 
    display: block; 
}

在這裏你可以看到這個問題。當您懸停在項目1上時，它不會讓我懸停其具有黃色背景的子項目。

enter image description here