在FF/Chrome/Safari中CSS菜單看起來不錯，但IE瀏覽器不支持IE

Question

我正在使用CMS來構建網站，並且我在菜單中遇到了一些麻煩。正如話題所說，它在IE中並不完美。在其他瀏覽器中，我將鼠標懸停在菜單項目和子菜單上以顯示該項目，當我將鼠標懸停在子菜單中的項目上時，該項目將以藍色背景突出顯示。但是，在IE中，只有第一個子菜單項在我懸停時高亮顯示，而當我將鼠標懸停在其他項上時沒有。正如我在HTML圖所示，如果我將鼠標懸停在產品 - >應用背景爲灰色，但如果我將鼠標懸停在第一個項目（在線服務）的背景會變成藍色。

主菜單項，當我在它懸停具有圖像作爲背景和另一個圖像，或者它是活動的，則子菜單具有灰色背景，當我將鼠標懸停在項的藍色的。

HTML

<div id="header"> 

    <ul id="menuElem"> 

     <li class="home2"><a href="Home.aspx" >Home</a></li> 
     <li class="products"><a href="Products.aspx" >Products</a> 
      <ul> 
       <li><a href="Products/Online-Services.aspx" >Online Services</a></li> 
       <li><a href="Products/Applications.aspx" >Applications</a></li> 
      </ul> 
     </li> 
     <li class="about"><a href="About.aspx" >About Us</a> 
      <ul> 
       <li><a href="Blog.aspx" >Blog</a></li> 
       <li><a href="About/News.aspx" >News</a></li> 
       <li><a href="About/Events.aspx" >Events</a></li> 
      </ul> 
     </li> 
    </ul> 

</div> 

的CSS菜單子項

#header li ul{ 
    background: rgb(211,211,211); 
     display:none; 
     height:auto; 
    filter:alpha(opacity=95); 
    opacity:0.95; 
     position:absolute; 
     width:161px; 
    z-index:200; 
    margin-left: 9px; 
} 

#header li li { 
    display:block; 
     float:none; 
    padding: 0px; 
    width:161px; 
    margin-left: 0px; 
    border-bottom: 1px solid; 
    border-color: #fff; 
} 

#header li:hover ul{ 
     display:block; 
} 

#header li ul li a {background-image: none; 
      color:#000; 
      text-indent: 0px; 
        width: 161px; 
      padding-left: 5px; 
} 

#header li ul li a:hover {background-image: none; 
      background: rgb(26,66,126); 
      color:#fff; 
} 

CSS主菜單

#header ul { 
    display:block; 
    overflow:hidden; 
    float:right; 
    width:625px; 
    height:38px; 
    margin-top: 0px; 
} 

#header ul li { 
    display:block; 
    overflow:hidden; 
    float:left; 
    margin-left:2px; 
} 


menuhome a { 
    display:block; 
    overflow:hidden; 
    background:url(images/nav_home.png) no-repeat; 
    width:69px; 
    height:38px; 
    text-indent:-900px; 
} 

.menuhome2 a { 
    display:block; 
    overflow:hidden; 
    background:url(images/nav_homeH.png) no-repeat; 
    width:69px; 
    height:38px; 
    text-indent:-900px; 
} 

.menuhome a:hover, .menuhome a:active { 
    background:url(images/nav_homeH.png) no-repeat; 
} 

.menuabout a { 
    display:block; 
    overflow:hidden; 
    background:url(images/nav_about.png) no-repeat; 
    width:88px; 
    height:38px; 
    text-indent:-900px; 
} 

.menuabout2 a { 
    display:block; 
    overflow:hidden; 
    background:url(images/nav_aboutH.png) no-repeat; 
    width:88px; 
    height:38px; 
    text-indent:-900px; 
} 

.menuabout a:hover, .menuabout a:active { 
    background:url(images/nav_aboutH.png) no-repeat; 
} 


.menuproducts a { 
    display:block; 
    overflow:hidden; 
    background:url(images/nav_products.png) no-repeat; 
    width:87px; 
    height:38px; 
    text-indent:-900px; 
} 

.menuproducts2 a { 
    display:block; 
    overflow:hidden; 
    background:url(images/nav_productsH.png) no-repeat; 
    width:87px; 
    height:38px; 
    text-indent:-900px; 
} 

.menuproducts a:hover, .menuproducts a:active { 
    background:url(images/nav_productsH.png) no-repeat; 
} 

通常我只是Gooogle企業的CSS橫向菜單，並創建一個在工具在那裏在線，然後複製並粘貼它，但與此CMS（建立在asp.net上，並使用母版）我h可以在每個菜單項目的菜單中分配一個班級名稱。

我該如何解決這個問題？

在此先感謝。

Answer 1

對於不是IE的CSS，你可以使用條件的意見，看看這篇文章：

Conditional Comments。