codemax — 2010-06-07T11:53:15-04:00 — #1
I am trying to fix this IE7 bug (can be viewed in IE8 compatibility mode too) :
On hover, my CSS sub-menu appears behind other page elements below.
For example, Products sub-menu is behind the title and thumbnails.
My guess it has to do with the stacking order: tried to fix it by adding z-index and zoom properties to sub-menu UL, but it didn't solve the IE7 problem.
Everything works fine in other modern browsers (IE8, FF3, Safari, Opera, Chrome).
Any insight from CSS gurus would be appreciated.
codemax — 2010-06-07T13:33:48-04:00 — #2
Yes, that's right!
IE7 was cured by adding z-index added to the parent UL menu list. (My error was that I was trying to add it only to children sub-menu lists)
Thank you very much, David.
david_a — 2010-06-07T17:46:11-04:00 — #3
In case you were wondering, z-index is a kinda tricky subject, but in short, if it's not an image, then it needs to have a position:[value] on the element for it to work. Google if you want to find out more.
david_a — 2010-06-07T12:01:18-04:00 — #4
Z-index is just what you need. Place z-index:2 on ul#main-nav to fix it.