Forums

lucaswynne

When you hover over one of my menu items with a large sub-menu it gets cut off by my footer element. i.e. Hover over categories here: http://themeforward.com/demo2/?page_id=1846

I'm assuming my CSS for my entire menu and CSS for my footer are the culprits, but I can't be sure. I'd appreciate any help! Below is the CSS for my menu's main content and footer.

  .sf-menu, .sf-menu * {
margin:     0;
padding:    0;
list-style:   none;
z-index:    500!important

}

.footer_outside {
clear:both;
border-top:1px solid #DDD;
display:block;
z-index:0!important

}

Paulie_D

Do you really need all those items in the 'long' menu?

Is your 'portfolio' section really going to be only that tall. Try making it say 500px.

I think you might be trying to solve a problem that isn't going to exist in the real world.

Other than that, I think z-index only works on positioned elements. Try adding ''position:relative' to your menu.

lucaswynne

That didn't work. I'm building a theme and while I agree with your point,I know somebody with absolutely no design experience will purchase the theme and have a problem.

michaelwhyte

Did you make sure to set position relative (or absolute) on the element...I believe z-index only works on elements with a position property value of relative or absolute...

michaelwhyte

I just tried setting your position relative...but it seems to push your footer down instead of going over top of it...

lucaswynne

Thanks for the attempt Michael, I tried that and ran into the same problem. I'm tinkering with it still and am having difficulty figuring out what the problem is.

wolfcry911

its the overflow: hidden on #wrap

treehouse : what would you like to learn today?

Forums

Menu Z-Index Problem