IE7 sticky hover bug fix

This is a demonstration of one of the IE7 sticky hover bug fixes with CSS dropdown or popup menus which use dynamic pseudo classes. IE7 and 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.

Just a spash of colour for a bug fix

So what is the magic that makes the prettier version of the Sons of Suckerfish menu work when javascript is disabled or show normal when javascript is enabled? It is the property and value {background: green;} for the #nav li:hover selector. This does not work with the Sons of Suckerfish Vertical menu.

Example 1: Prettier Sons of Suckerfish dropdown

• Item 1
  • Item 1-1
    • Item 1-1-1
    • Item 1-1-2
    • Item 1-1-3
  • Item 1-2
  • Item 1-3
• Item 2
  • Item 2-1
  • Item 2-2
  • Item 2-3
• Item 3
  • Item 3-1
  • Item 3-2
  • Item 3-3

Another solution is to remove the background from the #nav li ul selector and add it instead to the #nav li:hover ul selector. If the background appears on both selectors or none of them, then the menu does not work and shows the sticky hover bug.

Example 2: Barebones Sons of Suckerfish dropdown with background colour change

• Item 1
  • Item 1-1
    • Item 1-1-1
    • Item 1-1-2
    • Item 1-1-3
  • Item 1-2
  • Item 1-3
• Item 2
  • Item 2-1
  • Item 2-2
  • Item 2-3
• Item 3
  • Item 3-1
  • Item 3-2
  • Item 3-3

Back to the Article

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

Author:

Alan Gresley