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:
- <!--[if lte IE 6]>
<style type="text/css" media="screen">
body {behavior: url(../css/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:
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:
- #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
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:
- the borders themselves are dead space (IE 6 & 7),
- the padding in the <li> elements is dead space (IE 6 & 7), and
- 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:
- #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:
- * 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.