"Son of Suckerfish" CSS Menu - sub menus not closing in IE7

Question

Despite my most convincing cries to the contrary, I was recently forced to implement a horizontal drop-down navigation system, so I opted for the friendliest one I could find - Son of Suckerfish.

I tested in various browsers on my machine and all appeared to be fine. However, some (but not all!) IE7 users are experiencing an issue where sub menus do not close after they have been hovered over. The most annoying thing is that the affected users are using the exact version of IE7 that I am (7.0.5730.13), with the same privacy and security settings (I even had them send screenshots of the tabs in Internet Options) on the same OS (XP). I cannot verify if Vista is affected or not.

Obviously trying to debug this issue is a nightmare since I cannot replicate it, so I am wondering if anyone here can and might know how to solve it. I have set up an example page here:

http://x01.co.uk/menu_test/

Additionally, there's an annoying flicker on rollover of the sub items which I have also tried to solve with no success, so any help with that would also be appreciated. Thanks in advance!

Answer 1

For testing why not download the Vista IE7 VPC image from MS themselves?

http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF

Not sure about the bug though. Remember having similar issues I think its because you need a JS. Will try and find out

Answer 2

This is a problem that occurs in IE7 when another part of the page has focus (ie, you clicked somewhere and then mouse-over the menu). It seems to be an issue with the :hover pseudo-class.

Adding a hasLayout trigger to the :hover style should fix the problem.

#nav li:hover {
  position: static;
}

There are other solutions too. There's a great write-up about the problem here:

Sticky Sons of Suckerfish