Dropdown Menu And Z-Index

[Todd_Temple]

LINK-
http://www.rainscapes.com/media/

The above link has a drop down menu for the “Services” button/tab and when you hover over it, one of the list items is being cropped or cut off. It appears that it is displayed behind the #main div. Can anyone tell me why and how to fix this? Thank you in advance!

Todd

[ronpat]

Looks like you’ve found the solution already

[Todd_Temple]

I did! Thank you for responding and looking into this. I found a clearfix class added to the header div that had overflow: hidden and the dropdown appears once I remove that property. Thanks again!

[ronpat]

An “fyi” if I may…

It seems to be popular to equate “clearfix” with {overflow:hidden} these days; however, they are entirey different mechanisms. An actual “clearfix” would not have caused the problem that you experienced because it would not have caused the “overflow:hidden” truncating effect. If you still need to clear floats, use a real clearfix.

There are several variations. This is one…

.cf:before,
.cf:after {
    content:"";
    display:table;
    line-height:0;
}
.cf:after {
    clear:both;
}

this is another…

.clearifx:after {  /* contain floats*/
    content:" ";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}