Question

My situation:

I have a three-tier navigation structure where hovering over an item in the secondary level should show a div, which contains the tertiary level.

I have included a screenshot to help illustrate this:

The markup I’m using to create this is (sanitised) roughly as below:

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

When you hover over ‘Level 2’, the ‘Tertiary Level’ div should appear. To do this, I use CSS such as the below:

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

My problem:

In IE6, when I hover over ‘Level 2’, nothing happens. This is only a problem in IE6 – all other browsers work fine. Is there something wrong with my CSS selectors?

Many thanks.

Answer 1

You can use the great ie7.js.

Just add to your html:

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

This will make ie6 suport :hover on all elements like in this demo.