HTML列表無意間級聯

我有一個菜單，其中包含用無序列表，css和圖像創建的懸停效果。在IE9，FF v15和Chome v22中查看時，菜單顯示正確。但是，在IE9兼容模式下，或者將文檔模式設置爲IE8或更低版本時，菜單無法正確顯示。它有一些cascarding的效果，其中列表元素每個顯示略低於最後一個。HTML列表無意間級聯

正確外觀： enter image description here

在兼容模式或文檔模式IE8或以下外觀： enter image description here

的HTML是：

<div class="Menu2"> 
      <ul> 
      <li><a href="index.php" class="MenuHome">Home</a></li> 
      <li><a href="coolRooms.php" class="MenuCoolRooms">CoolRooms</a></li> 
      <li><a href="onlineBooking.php" class="MenuOnlineBookings">OnlineBookings</a></li> 
      <li><a href="termsAndConditions.php" class="MenuTermsAndConditions">Terms&Conditions</a></li> 
      <li><a href="madigansMilk.php" class="MenuMadigansMilk">Madigan'sMilk</a></li> 
      </ul> 
     </div>

的CSS是：

.Menu2 { 
    z-index:100px; 
} 
.Menu2 ul { 
    width:850px; 
    padding:0; 
    margin:0; 
    /*margin-left:98px;*/ 
    list-style-type:none; 
} 
.Menu2 li a { 
    display: block; 
    float: left; 
    height:65px; 
    background-image: url(../images/Menu.png); 
    text-indent:-9999px; 
} 
.MenuHome { 
    width:99px; 
    background-position:0 0; 
} 
.MenuCoolRooms { 
    width:149px; 
    background-position:-99px 0; 
} 
.MenuOnlineBookings { 
    width:195px; 
    background-position:-249px 0; 
} 
.MenuTermsAndConditions { 
    width:221px; 
    background-position:-444px 0; 
} 
.MenuMadigansMilk { 
    width:186px; 
    background-position:-665px 0; 
} 
.MenuHome:hover { 
    background-position:0 -65px; 
} 
.MenuCoolRooms:hover { 
    background-position:-99px -65px; 
} 
.MenuOnlineBookings:hover { 
    background-position:-249px -65px; 
} 
.MenuTermsAndConditions:hover { 
    background-position:-444px -65px; 
} 
.MenuMadigansMilk:hover { 
    background-position:-665px -65px; 
}

原始菜單圖像是： enter image description here