Z-index difficulty

[operapixie]

I still don't have a good grasp of the z-index rules. Is the higher number going to be on top or below? ARGH

In any case, it may be that I'm wanting to do something that isn't quite possible. My sub-sub menu items are showing up underneath a graphic element I have placed on the page. But that graphic element has to appear on TOP of the parent level of the menu. I don't know if it's even possible to set a sub-menu on a different z-index than another part of the menu itself.

http://www.lyricoperala.org/index3.html

In the meantime, I've also been asking in the javascript forum about how to fix the spacing issue in my Cufon menu sub-menu items (too far apart), but so far I haven't found any assistance. I keep doing google searches as well, but so far haven't turned up the solution, though I see it mentioned often.

Thanks in advance.

~Laura

[resdog]

z-index is a bugger to figure out sometimes. When you are working with z-index of two different divs, then the outside container of one of the divs cannot have a specified z-index, because you're going OVER one dive, but under it's contained elements. So in your example, move the z-index property from .site-nav to #menu and it should as you want it to.

As for Cufon, my suggestion would be to scrap cufon and move to @font-face. There is a generator here:

http://www.fontsquirrel.com/fontface/generator

and if you're interested in reading up on how z-index works:
https://developer.mozilla.org/en/Und...text_example_1

and

http://tjkdesign.com/articles/z-inde...ents_stack.asp

[sunfighter]

The higher number item appears on top of the lower number, but z-index only works on relative/absolute positioned items. To save heart ache could you place the sub menus to the left?

[operapixie]

Thanks again, Resdog. You're a great help.

I'm still having some difficulties, but originally your suggestion worked. Thing is, I went with your other suggestion of switching from Cufon to @font-face, which meant that I changed the CSS. I tried to keep things mostly the same, but I seem to have screwed it up somewhere along the line since now, not only are my 3rd level menu items still showing up under the Tix image, but now all my social media links that were underneath my "donate" button, but within the menu bar, have disappeared.

And...for some reason now my footer image only stretches the width of the center of the page instead of all the way across, and so far as I can tell, I haven't changed that part of the code.

Grrrr...soon as I've got all these things straightened out I am SO re-doing the entire code from start to finish in order to make it all as clean as possible. It's driving me NUTS!! LOL

Thanks again in advance.

~Laura