Vertikal-Menü: schweben Pausen in IE

Question

http://www.thelisthq.net/datetest.php

Wenn Sie die Seite in Firefox, Chrome zu sehen, oder dh 8 mit Kompatibilitätsmodus aus dem vertikalen Menü funktioniert einwandfrei. Meine Taktik war, das ganze Menü nach rechts zu schweben und die Kugeln umzudrehen (Kugeln rechts). Wenn Sie es in früheren Versionen von ie anzeigen, bricht es. Ich kann mir nicht vorstellen, wie ich das beheben kann, ich habe verschiedene Doctypes ausprobiert und viele kleine Verbesserungen, aber es scheint nicht zu funktionieren. Wer kennt eine Lösung oder hat einen Einblick?

Answer 1

Ich reparierte es mit diesem CSS.

#sidenav ul{ 
    /* removed: float:right; */ 
    padding:0; 
    white-space:nowrap; 
    /* removed: direction:rtl; */ 
} 
#sidenav li{ 
    font-size: 16px; 
    font-family:"Times New Roman", Times, serif; 
    list-style-type:none; 
    width:220px; 
    background: #2a3940; 
    color: #FFF; 
    padding-top: 3px; 
    padding-bottom: 3px; 
    margin-bottom: 15px; 
    text-align:center; 
    /* removed: direction: ltr; */ 
    /* added: */ 
    float: right; 
} 

Answer 2

Sorry für Ihren Code nicht sehen, aber ich versuchte, schnell meine eigene Rolle auf das, was ich auf der Seite sehen konnte: Sie können ein clearfix auf #sidenav ul anwenden müssen.

Arbeiten auf IE6, IE7, Firefox (haben Chrome nicht zu testen)

Hinweis: Kens Antwort wahrscheinlich die Lösung für Sie.

#menu { 
    width: 200px; 
} 
#menu ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
} 
#menu ul li { 
    margin: 5px 0; 
    float: right; 
} 
#menu ul li a { 
    display: block; 
    background: #000; 
    color: #fff; 
    text-decoration: none; 
    padding: 4px; 
    width: 150px; 
    text-align: center; 
} 
#menu ul li a:hover { width: 200px; } 

und Mark-up:

<div id="menu"> 
    <ul> 
     <li><a href="#">Menu Item</a></li> 
     <li><a href="#">Menu Item</a></li> 
     <li><a href="#">Menu Item</a></li> 
     <li><a href="#">Menu Item</a></li> 
     <li><a href="#">Menu Item</a></li> 
    </ul> 
</div>