القائمة العمودية باستخدام فواصل:hover في IE [مغلق]

Question

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

إذا قمت بعرض الصفحة في فايرفوكس أو كروم أو أي 8 مع وضع التوافق خارج القائمة الرأسية، فإن ذلك يعمل بشكل جيد.كان تكتيكي هو تحريك القائمة بأكملها إلى اليمين وعكس التعداد النقطي (الرصاص على اليمين).إذا قمت بعرضه في الإصدارات السابقة من أي فواصل.لا أستطيع التفكير في كيفية حل هذه المشكلة، لقد جربت أنواعًا مختلفة من المستندات، والعديد من التعديلات الصغيرة ولكن يبدو أنني غير قادر على جعلها تعمل بشكل صحيح.هل يعرف أحد حلاً، أو لديه أي فكرة؟

Answer 1

وأنا ثابت مع هذا المغلق. قد تحتاج إلى تطبيق clearfix على #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

آسف لعدم عرض الكود الخاص بك، ولكنني حاولت سريعًا إنشاء الكود الخاص بي بناءً على ما يمكنني رؤيته على الصفحة.

يعمل على IE6، IE7، Firefox (ليس لديه Chrome للاختبار)

ملحوظة:ربما تكون إجابة كين هي الحل المناسب لك.

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

والعلامة:

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