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;
}

Answer 1

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

Answer 2

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!