superfish drop-down menu displaying underneath div below it

Question

Example of what it is doing: http://screenr.com/k2X

I set the z-index of div class="container_12 header" to 2 and the div class="container_12 content" to 1

the ul class="sf-menu" is set to 99, which is within the container_12 header div

I've had this problem before and thought setting the z-index's appropriately for classes would do the trick, but it still giving me that problem of displaying the drop-down menu behind the div beneath (container_12 content)

Any help is appreciated, thank you.

.container_12.content {
  z-index: 1;
}

.container_12.header {
  background-color:#030;
  height:125px;
  border:1px solid yellow;
  z-index: 2;
}

Maybe put the drop-down inside the body element instead of a div? — tcooc, Jul 20 '10 at 14:58

cusspvz · Accepted Answer · 2010-07-20T18:02:47.217

5

the div where the superfish menu and logout button are has the property overflow:scroll; Change that to visible.

overflow:visible;
z-index:0;
position:relative;

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

EDIT: for best results, load htmlreset.css before!

edited Jul 20 '10 at 18:02

answered Jul 20 '10 at 15:00

cusspvz

5,143
7
30
45

thanks, that did the trick, now in IE 7, the menu seems to be transparent, as you can see here http://cl.ly/2315231db5666d6e3297 - you know why that may be? – Brad Jul 20 '10 at 15:05
thats the z-index, and position, make sure that all elements are with lower z-index and position:relative. test with something like this: *{position:relative;z-index:0;} //Before all other CSS styles! – cusspvz Jul 20 '10 at 15:09
for best results, load htmlreset.css before – cusspvz Jul 20 '10 at 18:02

score 0 · Answer 2 · answered Jul 20 '10 at 14:58

0

Are your divs and ul positionned ? I think z-index only works on positionned selectors.

answered Jul 20 '10 at 14:58

Boris Delormas

2,509
1
19
27

superfish drop-down menu displaying underneath div below it

2 Answers2