Internet Explorer 7, among many other drawbacks, does not know what :hover in CSS means, so drop down menus may not work well in IE7 when using :hover.
Obviously, this defect happens in IE6 as well, however, since this blog doesn’t support IE6, I will only relate to the problem as it appears in IE7.


Some of you may prefer to build drop down menus using Javascript to begin with, however, I always recommend using CSS over javascript, unless you need some animation effects (because CSS renders faster then JS and it does not require the browser to have javascript turned on).

The classic CSS :hover syntax for drop down menus looks like this:

#menu li ul{display:none}/*all submenus are hidden*/
#menu li:hover ul{display:block}/*a submenu appears once the user hovers over the parent menu item*/

This will work in all browsers except IE7 and below. What happens in IE7 is, that the submenu appears just as long as the mouse hovers over the parent menu item. So once you move the cursor downwards over the submenu, the submenu simply disappears.

Check out this demo page using Internet Explorer 7 (if you only have IE8 installed, simply click on the quirks mode button (near the refresh button)).

In the demo page, I wrote a simple script that toggles the IE7 hover fix by clicking the button.
The solution is to set a one pixel transparent background image (in .png format) to all submenu UL tags:

.submenu{background:url("images/transparent-image.png")}

You may have read in other tutorials that a background color can do the trick, however, you can see in my demo page that the submenus have rounded corners at the bottom, and therefore, a background image to the submenu UL tags will override those round corners and they will not be rounded corners any longer.

An additional solution I have read about is the proper declaration of DOCTYPE to be strict in order to enable IE7 full css support (like discussed here), however, as you can see in the demo page, it already has such a declaration and still does not solve the hover problem.

Additional resources

Topics:   | | |