Superfish wird nicht in IE8 angezeigt

Question

Ich habe ein Problem mit Superfish, die das Dropdown-Menü in NUR IE8 überhaupt nicht erscheinen lässt. Es zeigt sich in allem anderen (sogar IE6), aber nicht IE8. Ich habe die Quelle JS überhaupt nicht verändert und ich rufe ein div namens "subnav" auf, wo meine Liste angezeigt wird.

Was passiert, wenn ich mit der Maus über den Menüpunkt gehe, ändert sich das CSS des Dropdown-Menüs in "Sichtbarkeit: sichtbar, Anzeige: Block" und zeigt das Menü an. In IE8 passiert nichts, und CSS wird überhaupt nicht geändert.

Irgendwelche Ideen, was könnte es verursachen? Ich benutze auch das Supersubs-Plugin für Superfish. Hier

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

Hier ist, wie es auf der Seite los ist:

<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

nicht sicher, ob dies das Problem lösen werden Sie sehen, aber ich bemerkte in Ihrem HTML-Snippet, dass die UL-Elemente mit der Subnav-Klasse nicht mit einem passenden Tag geschlossen werden. Das erste, was ich würde versuchen, ersetzt sie mit:

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

Alle anderen Fehler können nicht durch IE8 als gnädig als andere Browser behandelt werden wird. Versuchen Sie, Ihre Seite durch einen Validator laufen zu lassen (zB: The W3C Markup Validator)