Superfish ne s'affichera pas dans IE8

Question

J'ai un problème avec superfish qui fait que le menu déroulant n'apparaisse pas du tout dans seulement IE8. Il apparaît dans tout le reste (même IE6) mais pas IE8. Je n'ai pas du tout modifié le JS source et j'appelle un div appelé "subnav" où ma liste est affichée. Ce qui DEVRAIT arriver quand je passe la souris sur l'élément de menu, cela change le CSS du menu déroulant en "visibilité: visible, affichage: bloc" et affiche le menu. Dans IE8, rien ne se passe et aucun CSS n'est changé du tout.

Une idée de ce qui pourrait être la cause? J'utilise aussi le plugin supersubs pour superfish.

Voici le css:

#navbar ul{ 
    margin:10; 
    padding:0; 
    width:1000px; 
} 

#navbar li{ 
    float:left; 
    color:#191919; 
    list-style-type:none; 
    text-transform:uppercase; 
    background:transparent url('../images/common/layout/nav-separator.jpg') center right no-repeat; 
    padding:10px 0; 
} 

#navbar li.last{ 
    background:none; 
} 

#navbar ul li a{ 
    padding: 12px 33px; 
    color: #fff; 
    text-decoration: none; 
} 

#navbar ul li a:hover{ 
    color:#05af0d; 
    background:transparent url(../images/common/layout/nav-hover-highlight.png) top center no-repeat; 
} 

#navbar ul li a.hover-arrow:after{ 
    margin-left:10px; 
    content:url(../images/common/nav-arrow.png); 
} 

#navbar ul li:hover a.hover-arrow:after{ 
    margin-left:10px; 
    content:url(../images/common/nav-arrow-roll.png); 
} 

#navbar ul li a.hover-arrow:hover{ 
    background:#000 url('../images/common/layout/nav-separator.jpg') right 9px no-repeat; 
} 

#navbar ul li p{ 
    margin:0; 
    display:inline-block; 
} 


/*Sub Nav Lists */ 
.subnav { 
    display:none; 
    visibility:hidden; 
} 

#navbar ul li ul{ 
    margin:0; padding:0;  
    position: absolute; 
    left: auto; top: 40px; 
    background: #333; 
    z-index: 99; 
} 

#navbar ul li ul li{ 
    background:none; 
} 

#navbar ul li ul li a{ 
    padding:0px 3px; 
    display:inline-block; 
    margin:0; 
    width:150px; 
    text-transform:capitalize; 
} 

#navbar ul li ul li a:hover{ 
    background-color:#a7a7a7; 
    color:#000; 
    border:none; 
    background-image:none; 
    font-weight:bold; 
} 

Voici comment il va sur la page:

<div id="navbar">  
    <ul class="topnav"> 
     <li id="item 1"><p></p> 
     <ul class="subnav"></subnav> 
     </li> 
     <li id="item 2"><p></p> 
     <ul class="subnav"></subnav> 
     </li> 
     etc... 
    </ul> 
</div> 

Answer 1

Je ne sais pas si cela va résoudre le problème que vous voyez, mais j'ai remarqué dans votre extrait html que les éléments UL avec la classe subnav ne sont pas fermés avec un tag approprié. La première chose que je vais essayer est de les remplacer par:

<ul class="subnav"></ul>

Toute autre erreur ne peuvent pas être traitées par IE8 aussi gracieusement que d'autres navigateurs. Essayez d'exécuter votre page via un validateur (par exemple: The W3C Markup Validator)