Disappearing borders dropdown menus in IE6

[Pennywaffer]

I have a sample here that displays a bug in IE6 which I can't seem to fix:

http://www.pennywaffer.net/testcase/sample.html

What happens is:

When you open one of the two dropdown menus in IE6, the bottom border will be partially invisible. It only happens the first time the menu is opened. Also, when IE loses focus to a different app and then gets focus again (while the dropdown is still open with partially gone borders), the borders will be normal again.

Does anybody know why this happens, and most of all, how it can be fixed?

The dropdown menus are revealed and positioned through JS in the file

http://www.pennywaffer.net/testcase/menu.js,

the relevant function being revealMenu()

The css can be found here:

http://www.pennywaffer.net/testcase/sample.css

The style for the dropdownmenu is ul#nav3 li ul.displaynav

The problem does not occur in IE7, Firefox or Opera

If someone recognizes this and or knows how to fix it, I would be very grateful.

Thanks!

 

[Vragabond]

I think that other than playing with position: relative;, height: 1%; or stripping the styles to identify exactly what is wrong with the IE6 misbehaving, there isn't much you can do.

 

[Pennywaffer]

I fixed it by adding position: relative to ul#nav3 and ul#nav3 li ul li

Thanks!