[Solved] 3 levels pure CSS dropdown menu : IE is killing me !

Your menu is falling behind the big white logo instead of over it in IE maybe zet the z-index for the logo to be below the menu?

Thanks Dimmy

Already tried but it doesn’t work.

Since I don’t have time to dig further into this (a bit overworked lately), I have contacted Stu to get permission to use his menu for this website.

David, before you give up... the thing to remember with the z-index property is that it will only work on an element thats position is specifically declared. e.g. relative, absolute, or fixed. I pulled all my hair out one night struggling with z-indexes before I realized that I forgot to specify the elements position!

-sD-

Thanks for the tip Scotty, I’ll give this a look !

Especially considering Stu’s menu does not make a better job with my design (I tried), items are still hidden so it’s definitely a positionning problem I am having...

Scotty, I owe you one for pointing me in the right direction !

As it turns out, I had not positionned the #menu element, nor did I set a z-index for it. And that’s what bugged it ! I had totally forgotten children of an absolutely positionned element have their z-index based on their parent, you can’t just assign a z-index to them, it doesn’t work since #photo and #logo are also absolutely positionned.

My menu now works for IE (minus some margin tweaks I have to straighten out, but that should be easy)... and so should Stu’s menu, I’ll try that right now !

Cool beans.

for positioning, one of the "cheats" I have been using lately is to use extra padding on elements in place of explicitly setting margins since IE’s box model seems to only render half the margins you set. it doesn’t always work, such as when you have a background image or color, but for list items in a menu, adding padding instead of margins means I can get away without conditional comments and another style sheet sometimes.

-sD-

Quote from: davidm at Sep 20, 2006, 04:10 PM

Edit : It seems Stu has built a new cross browser flyout since the first one always using the nested table hack... but apparently combining styles (no more ie stylesheet)
http://www.cssplay.co.uk/menus/flyout2.html

Yes, I made it as a example to Wayfinder too, but examples are not included in Beta3. You can find it from here temporarily.

Cool tip Scotty, I’ll also look into that

@Doze : you mean the CSS play folder that was originally in Beta2 ? This one was flyout1 if I am not mistaken. I adapted flyout2 and will provide the wf chunks when I am sure everything works correctly.

In the end, I didn’t use Stu’s menu, but a mix of mine and nested table trick he has...
It works up to the second level, but the third doesn’t work in IE for whatever reason I fail to understand

No, I have made updates to the linked archive above. You should find some of the new menus there and slightly better documentation too..

Yeah I have seen that Heliotrope and you already had done the job

Nice work, documentation and adaptation