IE7 sticky hover bug

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, but no sticky submenus are present.

IE7 using javascript for CSS menus

If you hover the below menus with javascript disabled, then nothing happens. If you hover the below menus with javascript enabled, the dropdown submenus will show since IE7 is using the javascript which mimics the dynamic pseudo classes. If you left mouse click anywhere on the page and then hover over the menus again, then the dropdown submenus will show, but will become sticky and will not disappear on hover out since IE7 is using the javascript meant for IE6.

Example 1: Barebones 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

Back to the Article

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

Author:

Alan Gresley