Oct 06

A fix for Suckerfish dropdowns in IE 7

Internet Explorer 7 is a welcome upgrade from IE 6, but it still has its share of display issues—and some new ones besides. Recently, I ran across one that falls in the latter category. Although Patrick Griffiths and Dan Webb’s Suckerfish dropdowns (and their follow-up, Son of Suckerfish) work fine in IE 6, they more or less choke and die in IE 7.

The problem is this: if you change focus within the browser (by clicking in a text field, for example, or somewhere on the background), then move back across the dropdowns, you’ll notice that all the menus “stick”—they don’t go away. In other words, they don’t refresh when the mouseout event is fired, even though the special hover class is removed.

Luckily, the fix for this is pretty simple. Assuming your unordered list menu ID is “menu”, you just need to add the following code to your stylesheet:

#menu li:hover, #menu li.hover {
  position: static;

Voilà, he says with proper grave accent! Problem fixed.

Like this post? You might also like Coalmine, my centralized error tracking service for your apps. Coalmine captures errors and all kinds of helpful debugging information, notifies you, and makes it all searchable. Check it out!