在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。