Strange visibility issue with CSS menu in IE7

Question

I have a CSS-only menu (ie. no JS) that works great in all modern browsers, but has a weird bug in IE7. It doesn't work well at all in IE6, but we don't need to address that here. The issue is as follows:

When you mouse over a menu option tab, the dropdown appears. When you mouse off that option, the dropdown disappears - and in IE7 only, the tab also disappears! The bit that gets me is this - the tab will reappear if you mouse over it again, or if you mouse over ANY OTHER TAB. How is this even possible?! A mouseover on another element making the original tab visible agin?? The annoying thing is, it worked in the last incarnation of this website, and somehow in the new design, it's gotten broken. I've tried comparing and can't work out what it is.

Here's a fiddle of the current broken version: http://jsfiddle.net/pXZLJ/1/

Here's one of the old working one: http://jsfiddle.net/43utK/

View these in IE7 to see the problem. Help? Thanks :)

Answer 1

Try deleting this line in your css: .nrmenu * {position:relative} . It seems to fix things.

EDIT: As sarcastyx pointed out, it does seem to affect the dropdown menus. So, add position:relative to .nrmenu li and dropdown menu appears again.