This is a demonstration of one of the IE7 sticky hover bugs with CSS dropdown or popup menus which use dynamic pseudo classes. You will need to be viewing this page in IE7 for the bug to be seen. For other browsers like FF and Opera, the menu will appear normal showing the dropdown submenus on hover. IE6 or earlier will also show the submenus because the javascript used mimics the dynamic pseudo classes.

IE7 using javascript for CSS menus

The results of these demonstrations show that there is issue in how IE7 handles the transition in positioning the submenus with a hover on or off event. This demonstration is not a bug fix, but gives the quirky set of values that IE7 needs to render things right. The below examples show the same menu repeated but with differences in positioning of the submenus on hover. The values given are not the normal positioning values for this type of CSS menus, but are just to demonstrate what is happening. In the unhovered state the submenus are positioned to the left with a background of orange, but still in view. When the menu items are hovered, the submenus background turns green. The various positioning values are given. Please have javascript disabled in IE7 for the examples.

Example 1

#nav li ul {
position: absolute;
left: 1em;
}
#nav li:hover ul {
left: auto;
}

This example has the basic positioning of the barebones Sons of Suckerfish dropdown menus. The only change for IE7 is the background colour on hover for Item 2-2. Item 2-1 is hidden underneath.

Example 2

#nav li ul {
position: absolute;
left: 1em;
}
#nav li:hover ul {
left: 0;
}

This example positions the submenus on hover at left:0;. Since the containing block is the <body> element, the submenus on hover should be sitting on the left edge of the page. The only change for IE7 is the background colour on hover for Item 2-2. Item 2-1 is hidden underneath.

Example 3

#nav li ul {
position: absolute;
left: 1em;
}
#nav li:hover ul {
left: 50%;
}

This example positions the submenus on hover at left:50%;. Since the containing block is the <body> element, the submenus on hover will be sitting halfway across the page. IE7 now renders the same as most other standard compliant browsers.

Example 4

#nav li {
position:relative;
}
#nav li ul {
position: absolute;
left: 1em;
}
#nav li:hover ul {
left: 0;
top: 100%;
}

As with example two, this example positions the submenus on hover at left:0;. The containing block is now the <li> element so left:0; positions the submenu right underneath, though left:auto; would also work. As with example three, a percentage is used in the positioning the submenu on hover, but with top: 100%;. IE7 now renders the same as most other standard compliant browsers.

Example 5

#nav li ul {
position: absolute;
left: 5%;
}
#nav li:hover ul {
left: auto;
}

This example positions the submenus on hover similar to example 1 with left:auto;, but the positioning when the menu items are not hovered is different using a percentage left: 5%;. IE7 now renders the same as most other standard compliant browsers.

IE7 needs a percentage

#nav li {
position:relative;
}
#nav li ul {
position: absolute;
left: -999em;
}
#nav li:hover ul {
left: 0;
top: 100%;
}
#nav li ul {
position: absolute;
left: -999%;
}
#nav li:hover ul {
left: auto;
}

From the results of the examples, it would appear that either the positioning to hide the submenus or the positioning to show the submenus needs a percentage to work. The values for the CSS shown on the right will both work. Instead of being a bug fix, it's a way of never introducing the bug altogether, the bug being how IE7 offsets positions elements on the hover event if no percentage is used in the values that either positions the elements when hovered or that positions the elements when not hovered.

Back to the Article

This demonstration was created on the 8th of May, 2007

Author:
Alan Gresley