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. Because the menus work in IE6, this sticky hover bug can not be created in this browser. Also to demonstrate this sticky hover bug and show that is doesn't need javascript enabled, no javascript appears for this demonstration.
Having an event for IE7 to work
With IE7, if you enter the <ul> element with the red border and hover any of the menu items but moving the mouse very slowly as you enter, then nothing will happen apart from the <ul> element increasing in height. If you hover over the menu items by moving your mouse down from above, but moving your mouse quickly, the dropdown submenu of the menu item that is hovered will show, but it will be sticky. You can hover any other menu item or the area within the <ul> element and the sticky submenu will still show. When you un-hover the <ul> element with the red border or hover reset, the submenu will disappear and the demonstration is reset. Obviously IE7 is using the dynamic pseudo class but very mysteriously.
Example 1: Barebones Sons of Suckerfish dropdown
Another way to hover the above menu if you have done so already is just amazing. Just move your mouse left and right hovering first Reset then Item 3, then Reset again.
Using a similar method the below menu has a hover on the top menu item <li> elements to give a greater width to the child <li> elements using this #nav li:hover li selector. The normal width for these elements is 6em and on hover they are 6.04em.
Example 2: Barebones Sons of Suckerfish dropdown with greater submenu width on hover
This demonstration was created on the 8th of May, 2007
- Author:
- Alan Gresley