Redoing the university site (where I work). Working on the menu. I'm trying to stay semantic as humanly possible, so I have a giant UL and I'm doing a bunch of trickery to get the effect I want. This is easier to explain if you can see it:
I have a CSS shadow on the dropdown. I want the that to fall behind the main menu (in green). The main menu also has a shadow on it, I want that above the dropdown. Then the all-important logo (which also has a shadow via a .png) must be above all. With some z-index workarounds I have this working well in pretty much all but Chrome of all places. Do you all have any suggestions?
I'm trying to avoid putting everything in the main menu in it's own separate html element, but right now that seems to be the only way to go to avoid all of the parent/child z-index issues.
hmmmmmm - it seems to be doing what you want it in chrome (win 7) (assuming the position of the drop-downs text links is in dev with regards to overlapping)...
that said I am unsure whether I understand what is going wrong - possibly because you fixed between posting and my responding?
It's mostly fixed now. I had to compromise and lose the dropshadow around the outside of the dropdown. I was able to fake the z-indexes by adding inner shadow to the top of the dropdown. Works out in the end.