Проблемы с наведением CSS IE6 в меню

Question

У меня есть наведение CSS-меню, которое работает во всех браузерах, кроме...сюрприз — IE6!

#menu_right ul li:hover ul { visibility: visible; }

Этот ul скрыто изначально, очевидно.Когда я навожу курсор на его родителя li, оно должно появиться...но это не так.

Чтобы попытаться определить проблему, я попытался сделать ul изначально видимый и действие при наведении взяло на себя что-то еще.Например:

#menu_right ul li ul { visibility: visible; }

#menu_right ul li:hover ul { background: red; }

Это не помогает.В других браузерах (включая IE7+) ul станет красным, когда я наведу курсор на его родителя list element.Но не в IE6.Что мне не хватает?

Answer 1

IE6 не знает CSS :hover псевдоатрибут, когда он появляется на чем-либо, кроме элемента ссылки.Для этого вам придется использовать JavaScript.Попробуйте условные операторы, и если вы используете jQuery, вы можете закодировать эффект наведения для IE6 в 3 строки (форматирование +/-):

<!--[if lt IE 7]>
<script type="text/javascript">
$('#menu_right ul li').hover (function () {
  $(this).addClass ("hover");
}, function () {
  $(this).removeClass ("hover");
});
</script>
<style type="text/css">
#menu_right ul li.hover {...}
...
</style>
<![endif]-->

Обратите внимание, что в операторах CSS я использовал точку вместо двоеточия.

Ваше здоровье,

Answer 2

Вы должны использовать что-то вроде этого

<ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
</ul>

и стиль <a> вместо <li>. Вам просто нужно убедиться, что размер a равен точно тому же размеру , что и <<>>.

div.menu ul.menu {
    margin:0;
    padding:0;
}

div.menu ul li {
    margin:0;
    padding:0;
}

div.menu ul.menu a {
    display:block;
    height:22px;
    margin:0;
    overflow:hidden;
    padding:0;
    width:252px;
}

Причина, по которой вы видите, что он работает во всех браузерах, кроме IE6, заключается в том, что он поддерживает li только для :hover элементов.

Answer 3

Взгляните на что угодно: hover http://www.xs4all.nl/~ peterned / csshover.html . Этот ребенок решает самые разные странные проблемы с IE6, может решить вашу.

Answer 4

Нет :hover ни о чем, кроме <a> ... Боже, я люблю этот браузер.

Попробуйте использовать: hover в удобно расположенном <=> (если это список ссылок, как в большинстве CSS-меню при наведении курсора, это не будет проблемой), или просто используйте Javascript, как уже предлагалось.

Answer 5

Это именно так, как написал Таль . Я не знаю, как это работает с таблицей, но этот пример отлично работает в IE6.

http://www.cssplay.co.uk/menus/final_drop.html