Menú vertical usando: hover se rompe en IE [cerrado]

Question

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

Si ve la página en Firefox, Chrome o, por ejemplo, 8 con modo de compatibilidad fuera del menú vertical, funciona bien. Mi táctica fue hacer flotar todo el menú a la derecha e invertir las viñetas (viñetas a la derecha). Si lo ve en versiones anteriores de ie, se rompe. No puedo pensar en cómo solucionar esto, probé diferentes tipos de documentos y muchos pequeños ajustes, pero parece que no puede funcionar correctamente. ¿Alguien sabe de una solución o tiene alguna idea?

Answer 1

Lo arreglé con este CSS. Es posible que deba aplicar un clearfix en #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

Perdón por no ver su código, pero intenté rápidamente crear el mío en función de lo que podía ver en la página.

Funciona en IE6, IE7, Firefox (no tiene Chrome para probar)

Nota: la respuesta de Ken es probablemente la solución para usted.

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

Y marcado:

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