I’m currently working on an template slice of a micro-site for one of our major clients and came across an annoying bug when attempting to implement Stu Nicholl’s CSS-only drop down menu solution for IE6. For some reason, any menu item that was in a ‘lit’ state would not display it’s drop down menu on :hover.

The rule used for a lit state was pretty simple as I was just basically modifying the background position of the image that was associated with the menu item, like so:

#secondary li a.lit {
background-position: 0 -25px;
}

When I removed the lit rule, the drop down menu would appear as expected. I tested by adding in some different rules and it work work, but as soon as I added anything relating to a background image, the drop down menu would refuse to co-operate.

The solution? Like almost any other issue that occurs in IE6-only, adding a rule to trigger hasLayout did the trick, in this case it was adding a style of zoom:1 to the :hover rule.

Still can’t figure out why this works, or why it wouldn’t work in the first place. Remember, I already had a background image assigned to the menu item, and all I was doing on :hover was modifying the background position.