IE8とIE7でZ-インデックスが機能しない

Question

http://chillicom.pixia.cz/で私のサイトのナビゲーションタブに問題があります。 各タブは、フォーマットされた絶対配置されたアンカー要素です。タブをクリックすると、アクティブになります。基本的には、クリックされたアンカーの背景イメージが「アクティブなバージョン」に変更されます。アクティブなバージョンはz-index 9999、非アクティブなバージョン1を持つため、アクティブなバージョンは非アクティブなバージョンと重複する可能性があります。それはIEでも、うまく動作します。ただし、最後のタブをクリックして最初のタブを再度クリックすると、最初のアクティブなタブが2番目の非アクティブなタブの下に表示されます。どうして？この問題はIE8とIE7でのみ発生します。誰でも助けてくれますか？おかげ

 <div id="menu"> 
      <a href="#" class="about active" name="about">about us</a> 
      <a href="#" class="services inactive" name="services">services</a> 
      <a href="#" class="contact inactive" name="contact">contact</a> 
     </div> 


#menu { 
    width: 500px; height: 27px; 
    margin-left: 300px; 
    margin-top: -27px; 
    overflow: hidden; 
} 

#menu a { 
    display: block; 
    background-repeat: no-repeat; 
    float: left; 
    position: absolute; 
    font-size: 15px; 
    color: #808080; text-decoration: none; text-align: center; 
} 

#menu .active { 
    width: 139px; height: 27px; 
    line-height: 29px; 
    background-image: url('/images/button-active.png'); 
    z-index: 9999 !important; 
} 

#menu .inactive { 
    width: 117px; height: 22px; 
    line-height: 20px; 
    margin-top: 5px; 
    background-image: url('/images/button-inactive.png'); 
    z-index: 1px !important; 
} 

#menu .about.active { 
    margin-left: -10px; 
} 

#menu .services { 
    margin-left: 120px; 
} 

#menu .services.active { 
    margin-left: 110px; 
} 

#menu .contact { 
    margin-left: 240px; 
} 

#menu .contact.active { 
    margin-left: 230px; 
} 

Answer 1

z-index: 1px !important; 

に変更この：ハードデバッグに

z-index: 1 !important; 

シンプルエラー、。