Le menu CSS semble bon dans FF/Chrome/Safari mais pas IE

Question

J'utilise un CMS pour construire un site et j'ai quelques problèmes avec le menu. Comme le dit le sujet, ce n'est pas parfait dans IE. Dans les autres navigateurs, je survole un élément de menu et un sous-menu de cet élément s'affiche. Lorsque je survole un élément du sous-menu, l'élément est surligné avec un arrière-plan bleu. Dans IE cependant, seul le premier élément du sous-menu est mis en surbrillance lorsque je le survole mais pas lorsque je survole les autres. Comme indiqué dans mon HTML ci-dessous, si je survole des produits-> Applications l'arrière-plan reste gris mais si je survole le premier élément (Services en ligne) l'arrière-plan devient bleu. Les éléments du menu principal ont une image comme arrière-plan et une autre image lorsque je les survole ou qu'elle est active, les sous-menus ont un arrière-plan gris et un bleu lorsque je survole les éléments.

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 pour les sous-éléments de menu

#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 pour le menu principal

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

Habituellement je viens gooogle css menu horizontal et créer un dans les outils là-bas en ligne, puis copiez et collez-le, mais avec ce CMS (construit sur asp.net et utilise une page master) I h ave pour assigner un nom de classe dans un menu pour chaque élément de menu.

Comment résoudre ce problème pour IE?

Merci d'avance.

Answer 1

Pour le PAS IE CSS, vous pouvez utiliser des commentaires conditionnels, consultez cet article:

Conditional Comments.