CSS 菜单在 FF/Chrome/Safari 中看起来不错，但在 IE 中看起来不错

Question

我正在使用 CMS 构建网站，但我在使用菜单时遇到了一些问题。正如主题所说，它在 IE 中并不完美。在其他浏览器中，我将鼠标悬停在菜单项上并显示该项目的子菜单，当我将鼠标悬停在子菜单中的项目上时，该项目会以蓝色背景突出显示。然而，在 IE 中，当我将鼠标悬停在第一个子菜单项上时，只有第一个子菜单项会突出显示，而当我将鼠标悬停在其他子菜单项上时则不会。如下面的 HTML 所示，如果我将鼠标悬停在 products-> Applications 上，背景仍然是灰色的，但如果我将鼠标悬停在第一个项目（在线服务）上，则背景变为蓝色。

当我将鼠标悬停在主菜单项上或它处于活动状态时，主菜单项具有一个背景图像和另一个图像，子菜单具有灰色背景，当我将鼠标悬停在项上时具有蓝色背景。

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;
}

通常我只是谷歌 css 水平菜单并在网上的工具中创建一个然后复制并粘贴它但是使用这个 CMS（建立在 asp.net 上并使用母版页）我必须在菜单中分配一个类名每个菜单项。

如何为 IE 解决这个问题？

提前致谢。

Answer 1

对于 NOT IE CSS，可以使用条件 cmets，查看这篇文章：

Conditional Comments.