ansaurus

Question

CSS drop down menu - stack order not right?

Answer 1

+1 A:

On your div element with ID "header-holder", you have CSS overflow values of hidden. Since the organizers list is a child of that, it won't be displayed outside of the bounds of that div. Get rid of those, and you're fine.

Matt Huggins 2010-09-24 22:37:19

did that - worked great, however it doesn't display past the images now .. which don't have the overflow:hidden rule..

Kevin 2010-09-24 22:45:37

Answer 2

+3 A:

Your div.header-holder has overflow: hidden, if you change that then the organizers list should show without any trouble.

Edited in response to OP's comment:

They are actually being covered up by those images now, and those don't have overflow:hidden applied...

You might find that applying position:absolute; to the drop-down ul (and position: relative to its parent li) should resolve that, by taking it out of the regular document flow, and making it sit above other non-absolute elements.

Of course since 'those' images are part of a carousel/slideshow, and positioned absolute too, they might not natively show 'above' them. In this case it's worth specifying a z-index for the slideshow images, and making sure that the z-index of the drop-down is higher than that for the images.

David Thomas 2010-09-24 22:38:15

Great ... that worked, don't know why I didn't see that before..

Kevin 2010-09-24 22:43:26

They are actually being covered up by those images now, and those don't have overflow:hidden applied...

Kevin 2010-09-24 22:43:44

It's always worth using Chrome's web inspector, or Firefox's Firebug add on to show what styles are being applied, and where they're coming from. Plus, in this instance, because of *where* it was being clipped both I, and probably @Matt, figured that `overflow` was the likeliest culprit.

David Thomas 2010-09-24 22:45:24

@Kevin, see edited answer.

David Thomas 2010-09-24 22:49:17

Cool - did you see my follow up? It still doesn't clear those images, which don't have the overflow property...

Kevin 2010-09-24 22:49:31

just saw your last response .. let me go check

Kevin 2010-09-24 22:50:00

@Kevin, see the newer edit, the slideshow's also `position: absolute` (and appear later in the DOM), so you'll need to use `z-index` as well.

David Thomas 2010-09-24 22:53:27

I must be putting it in the wrong place, as it's not reaching desired effect...

Kevin 2010-09-24 22:54:29

now those images do have a z-index - #visual-box img{ position:absolute; display:block; z-index:8;}#visual-box IMG.active { z-index:10;}#visual-box IMG.last-active { z-index:9;

Kevin 2010-09-24 22:55:39

The dropdown z-index is also set:ul.dropdown { padding-bottom: 1px; font: bold 13px/normal Arial, Helvetica, sans-serif; z-index: 1; border-style: solid; border-width: 1px; border-color: #f0f0f0 #666 #666 #f0f0f0;}

Kevin 2010-09-24 22:56:13

@Kevin, if you make sure the drop-down's `z-index` is greater (I tend to use a large amount, just to be sure) than that of the slideshow it should work. I'd recommend a `z-index: 9999;` just for kicks and surety =)

David Thomas 2010-09-24 22:57:28

That's done it - good man.

Kevin 2010-09-24 23:00:13

@Kevin, why thank you, kind sir =b And also for the accept =)

David Thomas 2010-09-24 23:01:34

Answer 3

A:

In the css block for #visual-box change the z-index to 0 and in the block for .header-holder change z-index to 1 and overflow to visable

Fsmv 2010-09-24 23:01:55

Answer 4

A:

You need to make tweaks to various values. Add these CSS rules:

.header-holder { overflow: visible; z-index: 300; }
#visual-box { z-index: 300; }
.box-info { z-index: 301; }
.box-info ul.dropdown { z-index: 301; }

babtek 2010-09-24 23:10:59

ansaurus

tags:

views:

answers:

CSS drop down menu - stack order not right?

related questions