CSS меню.Работает на всех браузерах, кроме IE

Question

Я пытаюсь создать меню CSS для моей веб-страницы для школы. Я разрабатывал свой сайт на Mac и работал так, как я хочу. Я проверил его в Safari, Firefox и Chrome, а также Firefox в Windows, все это отлично работает, я наведите курсор на меню ссылок, и оно выпадает.

CSS для меню

#menu
{
 position:relative;
 top:-83px;
 left:60%;
 font-size:30px;
 width:250px;
}


#menu ul
{
 position:absolute;
 list-style-type:none;
 background-image:url('../images/linkBG.png');
 background-repeat:no-repeat;
 background-position: 38px 0px;
 width:250px;
}

#menu li ul
{
 display:none;
 list-style-type:none;
 background-image:url('../images/menuBG.png');
 background-repeat:repeat-y;
 font-size:20px;
}


 #menu a:link {color:rgb(255,0,0);}
 #menu a:visited {color:rgb(255,255,0);}
 #menu a:hover {color:rgb(255,0,255)}
 #menu a:active {color:rgb(255,255,255);}

 #menu li:hover > ul
 {
 display: block;
 }

 #menu li ul li
 {
 padding-left:0px;
 padding-top:10px;
 padding-bottom:10px;


 }

При попытке его в IE (ver6 и ver8) меню ссылок перемещает его самостоятельно (перемещается вверх примерно на 50 пикселей и перекрывает заголовок), фоновое изображение перемещается вправо примерно на 30 пикселей, и меню больше не опускается вниз. когда мышь наводит курсор на текст. Я слышал, что IE - это боль для разработки, но это просто глупо. Я видел одно решение, которое включало в себя немного сценария, чтобы обойти эту проблему, но я не могу использовать сценарий, так как он предназначен для назначения (которое будет отмечено на машине Windows, поэтому есть большие шансы, что он попадет в IE). Наряду с неисправным меню есть таблица, которую я центрирую, используя margin-left:auto и margin-right:auto, еще раз, она прекрасно работает во всех браузерах, кроме IE. Есть ли способ, которым я могу обойти это? есть ли альтернатива hover, которая будет работать во всех браузерах.

спасибо.

HTML-код для меню

<div id="menu">
    <ul>
        <li>Links Menu
            <ul>
                <li><a href="#info">Details</a></li><!--This may be #details-->
                <li><a href="#home_town_float">Home town</a></li>
                <li><a href="#course">My Course</a></li>
                <li><a href="#listdemo">Books, Music and Films</a></li>
                <li><a href="#tabledemo">Timetable</a>     </li>
                <li><a href="#formdemo">Search</a></li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

Посмотрите на поля и отступы в вашем меню и заголовок над ним.IE иногда неправильно их интерпретирует, когда граничащие друг с другом объекты имеют поля и отступы.Если вы можете заменить поля с большим отступом или другим позиционированием, это может исправить это.

В противном случае, самый простой способ - использовать условные операторы IE, чтобы предоставить Explorer разные версии ваших классов CSS.Я сомневаюсь, что они будут считаться сценарием, но я честно не знаю.Пример:

<!--[if IE]>
    #menu {
         /* different positioning for IE only */
         top: ____;
         left: ____;
    }
<![endif]-->