HTML & CSS
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.
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.
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.
Z-index is just what you need. Place z-index:2 on ul#main-nav to fix it.