Menu Z-Index Problem

[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](http://themeforward.com/demo2/?page_id=1846 “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

[Author]

Posts