Menu vertical à l'aide: hover pauses dans IE

Question

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

Si vous affichez la page dans firefox, chrome ou soit 8 avec le mode de compatibilité sur le menu vertical fonctionne très bien. Ma tactique consistait à faire flotter tout le menu vers la droite et inverser les balles (balles sur la droite). Si vous l'affichez dans des versions antérieures de, c'est-à-dire qu'il se casse. Je ne peux pas penser à la façon de résoudre ce problème, j'ai essayé différents types de doctypes, et beaucoup de petites modifications, mais je n'arrive pas à le faire fonctionner correctement. Quelqu'un sait-il un correctif, ou avez-vous un aperçu?

Answer 1

Je l'ai corrigé avec ce CSS. Vous devrez peut-être appliquer une clearfix sur #sidenav ul:

#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

Désolé pour ne pas voir votre code, mais je me suis vite essayé de rouler mon propre basé sur ce que je pouvais voir sur la page.

Travaux sur IE6, IE7, Firefox (n'a pas Chrome à tester)

Note: La réponse de Ken est probablement la solution pour vous.

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

Et 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>