Показать скрытый div на: hover в IE6 - ничего не происходит

Question

Моя ситуация:

У меня есть трехуровневая навигационная структура, в которой при наведении курсора на элемент среднего уровня должен отображаться элемент div, содержащий третичный уровень.

Я включил снимок экрана, чтобы проиллюстрировать это:

Разметка, которую я использую для ее создания, (очищена) примерно так:

  <menu class="secondary-nav">
    <li>
      <a href="#">
         One
      </a>
      <div class="dropdown-menu">
         <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
         </ul>
      </div>
    </li>
  </menu>

Когда вы наводите курсор на «Уровень 2», должен появиться раздел «Третичный уровень».Для этого я использую CSS, например:

   menu.secondary-nav .dropdown-menu {display: none;}
   menu.secondary-nav a:hover .dropdown-menu {display: block;}

Моя проблема:

В IE6 при наведении курсора на «Уровень 2» ничего не происходит,Это проблема только в IE6 - все остальные браузеры работают нормально.Что-то не так с моими селекторами CSS?

Большое спасибо.

Answer 1

Вы можете использовать великий ie7.js .

Просто добавьте в свой HTML:

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->

Это сделает ie6 suport :hover на всех элементах, как в это демо .

Answer 2

IE6 не поддерживает :hover в элементе списка. Тебе придется смириться с JavaScript.