IE 6 hover selectors

IE 6 doesn't know what to do with :hover selectors when applied to elements other than links, meaning it works only for a:hover styles, not for the li:hover styles employed here. In 2003 Peter Nederlof developed a behavior file to correct much of this deficiency. It's called CSSHOVER, and can be downloaded here. It must be applied in the <head> of the document using IE conditional comments, like so:

  1. <!--[if lte IE 6]>
      <style type="text/css" media="screen">
        body {behavior: url(../styles/csshover3.htc);}
      </style>
    <![endif]-->

Once CSSHOVER is applied, the li:hover selectors now function properly in IE6.

IE 6 gaps

Unfortunately, other non-compliant aspects of IE6 crop up, namely IE6's horrendous and problematic box model. When a submenu becomes visible, its menu items have all sorts of extra space wrapped around them, making them all but unusable. Here's a screen-shot of what they can look like:

Screen shot of IE6 menu problems

These gaps are actually dead space between the <li> elements, which means that when the cursor hovers over a gap, it doesn't trigger a hover response and the submenu disappears. There are a number of solutions to this, but the simplest I've found is to just put a border at the top and bottom of each <li> element by adding the following to the formatting rule:

  1. #navHd.navH li {
      padding: 0 10px;
      background-color: #fcf;
      border: 1px black solid;
    }

The left border added earlier was replaced by a border all the way around the element; the top and bottom borders are required for this fix, while the left and right are not. If a visible border is not desired, then just make the border the same color as the background color. And this doesn't have to be an IE 6 specific hack since we can leave it in place for all browsers; for them it's just a border. The result appears like this

Screen shot of IE6 menu problems

Dead space and other gaps in IE 6 & 7

And, as seems to always be the case with IE 6 & 7, fixing one problem frequently uncovers others. In this case, now that deeper levels of submenus are visible, a lot of dead space has been exposed:

  1. the borders themselves are dead space (IE 6 & 7),
  2. the padding in the <li> elements is dead space (IE 6 & 7), and
  3. the horizontal gaps between submenus are dead space (IE 6 only).

Hover over any one of these areas and the submenu disappears, which makes the entire menu structure virtually unusable.

Fortunately, there's a simple fix to 1 and 2: give the <ul> elements a background color by inserting the rule:

  1. #navHd.navH ul {
      background-color: #fcf;
    }

Since this fixes the problem in both IE 6 and 7, one must conclude that these earlier versions of IE treat the <li> borders and padding as hover transparent elements, and if the <ul> elements have no background color then they too are effectively transparent, so the mouse cursor is, for all intents and purposes, not hovering on any menu item. By giving the <ul> elements a background color they are no longer hover transparent. This is another fix that can be applied across all browsers, since the <ul> elements are hidden behind menu items.

The horizontal gap between submenus can easily be fixed with a little negative left martin applied to 3rd level and higher menus, again equal to the sum of the parent <li>'s left padding and border:

  1. *html #navHd.navH li li ul {
      margin-left:-11px;
    }

However, since this negative margin should only be applied to IE 6, the *html hack is employed. The effect of this is only apparent in the final example page if it's viewed with IE 6 or 7.

Next

It's time to make this menu look good with some descent styling.

Horizontal:  H-1 H-2 [H-3] H-4 H-5 next