We have added a CSS/jQuery menu to our website to help users finding certain things in our website (http://www.swellnet.com.au), which works fine in Firefox, Safari, Chrome, and IE8.

Unfortunately in IE7 and below when the users place their mouse over one of the menu items with a child UL the menu item 'grows' a margin (or offset or whatever) which seems to be due to the nested UL.

I've tried adjusting the margins, padding, explicitly setting the position etc, however I cant seem to figure this out and its no doubt annoying out misfortunate IE7 and below users because once their mouse goes over the new space which appears the hover 'out' callback is fired, and the menu goes away.

A screen shot of the issue can be seen here: http://skitch.com/broc/niysf/stupid-ie-7

2 answers

o.k.w 2355
This was chosen as the best answer

Looks like another of IE7 specific bug.

I've tried playing around and found a solution, though not exactly a pretty one. That's using "float" to pack the list items and "clear" to prevent them from stacking horizontally.

You can give the following a try:

#nav ul.submenu li {
  float: left; /* change from none to left */
  clear: left; /* add this line */
  /* the rest of the properties*/

Should not have any side-effect on non-IE7 browsers.

Answered over 9 years ago by o.k.w
  • Thanks - this looks like its worked great - hack or not its the solution that worked so thats fine by me ;) Matthew Savage over 9 years ago

This might sound weird, but try adding position:relative to the element being hovered. It's an IE bug and I've had it happen before on a menu.

Answered over 9 years ago by VagrantRadio