Vertical menu using :hover breaks in IE

Question

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

If you view the page in firefox, chrome, or ie 8 with compatibility mode off the vertical menu works fine. My tactic was to float the whole menu to the right and reverse the bullets (bullets on the right). If you view it in earlier versions of ie it breaks. I can't think of how to fix this, I tried different doctypes, and many little tweaks but cant seems to get it to work properly. Anyone know of a fix, or have any insight?

Answer 1

I fixed it with this css. You may need to apply a clearfix on #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

Sorry for not viewing your code, but i quickly tried to roll my own based on what I could see on the page.

Works on IE6, IE7, Firefox (does not have Chrome to test)

Note: Ken's answer is probably the solution for you.

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

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