CSS Menu Undder & Over Woes

HTML & CSS
1

Hello Folks,

I have two CSS menus. One in the header and one in the left sidebar. Everything was fine until I added links to the header css dropdown. The challenge is that the CSS dropdowns in the header, once hovered upon, get blocked by the CSS menu that’s nested in the left sidebar.

I prefer to edit the left sidebar CSS but fear that the left sidebar flyout will be hidden by on page elements once it’s hovered over which it did before.

So I have to have my header css dropdown on top of the sidebar navigation and the sidebar navigation on top of the content.

Phew… Anyone got a tip I can follow?

Thanks,
RB

2

ralph. Great tip. Thank you… Even though I said to myself “the heck with IE7 down” about 1000 times. :wink:

3

That’s great. Just make sure to test the functionality in InternetExplorer (7 and down, if you can be bothered) as they have some nasty z-index bugs.

4

Thanks again for your response. I did figure it out.

I never actually knew what z-index did, I just stumbled upon what it does and bumped up the z-index on the header navigation and viola, it’s done.

Z-Index (for anyone that doesn’t know) is the Z Axis or basically depth (or lack there of) so if you want it to be ontop of something, set it higher, on bottom set it lower. But that can change depending on the type of positioning you assign (absolute / inherit) which actually reverses the function.

Hope this helps someone!

Thanks again,
RB

5

Normally dropdown elements have position: absolute on them, and perhaps a touch of z-index. There shouldn’t be a dilemma here. If you show us a link I’m sure we can suggest what to do. Otherwise the question is too vague.

6

If it weren’t a development and actually accessible I’d provide it.

I have a relative on the sidebar menu and an absolute on the header one. Here’s some code you want to take a look.

SIDEBAR CSS SAMPLE

#flyout (line 3642)
{
width: 212px;
height: auto;
position: relative;

HEADER NAV CSS SAMPLE

#nav ul, #nav div (line 532)
{
position: absolute;
width: 15em;
top: 22px;
left: -10000px;