In IE fallen meine Dropdown-Menüs tatsächlich richtig aus. Wie kann ich das beheben?

Question

Ich habe gerade Drop-Down-Menüs auf meiner Website installiert: http://www.squeakybooks.com/ Auf Mozilla arbeiten sie wie ein Traum. Ich hatte noch keine Gelegenheit, Safari oder Chrome zu überprüfen, aber in IE fallen die Dropdown-Menüs tatsächlich nach rechts. Dies ist ein großer Fehler, denn wenn Sie versuchen, auf etwas im Dropdown-Menü zu klicken, wird das NEXT-Drop-down-Menü noch weiter nach rechts aktiviert.

Allerdings funktioniert es auf dieser Website: http://squeakytestblog.blogspot.com/ Obwohl ich die exakt gleiche .xml-Datei auf beide hochgeladen.

Hier ist die CSS Ich verwende:

#jsddm { 
width:960px; 
margin: 0; 
padding: 0px; 
z-index:1000000000; 
position:relative; 
left:5% 
} 

#jsddm li { 
float: left; 
list-style: none; 
font: 12px Tahoma, Arial; 
} 

#jsddm li a { 
display: block; 
white-space: nowrap; 
margin:0px 0px; 
border: 0px solid #AAAAAA; 
background: #; 
background: -webkit-gradient(linear, left top, left bottom, from(#), to(#)); 
background: -moz-linear-gradient(top, #, #); 
padding: 2px 5px; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
text-shadow: #ffffff 0 0px 0; 
color: #363d1b; 
font-size: 15px; 
font-family: Helvetica, Arial, Sans-Serif; 
text-decoration: none; 
vertical-align: middle; 
text-style: center; 
} 

#jsddm li a:hover { 
background: #; 
} 

#jsddm li ul { 
margin: 0; 
padding: 0; 
position: absolute; 
visibility: hidden; 
border: 1px solid black; 
text-style: center; 
} 

#jsddm li ul li { 
float: none; 
display: inline; 
} 

#jsddm li ul li a { 
width: auto; 
background: #96CDCD; 
} 

#jsddm li ul li a:hover { 
background: #D3DC6E; 
} 

ich dieses Tutorial gefolgt: allblogtools.com/tricks-and-hacks/add-beautiful-drop-down-menu-for-blogger/

Bitte helfen!

Answer 1

Ihr Untermenü hat keinen Bezugspunkt von wo aus zu laden ist, um es zu reparieren, können Sie Ihren Listenmenüpunkt als relativ definieren und Ihr Untermenü absolut auf left des Menüpunktes positionieren, der sich bewegt. Versuchen Sie folgendes:

CSS

#jsddm li { 
    float: left; 
    font: 12px Tahoma,Arial; 
    list-style: none outside none; 
    position: relative; 
} 

#jsddm li ul { 
    border: 1px solid black; 
    left: 0; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    top: 100%; 
    visibility: hidden; 
}