Treehouse: Grow your CSS skills. Land your dream job.

Menu Z-Index Problem

  • # October 12, 2012 at 11:50 am

    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: []( “″)

    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 {
    border-top:1px solid #DDD;

    # October 12, 2012 at 11:58 am

    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.

    # October 12, 2012 at 12:15 pm

    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.

    # October 12, 2012 at 12:41 pm

    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…

    # October 12, 2012 at 12:46 pm

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

    # October 12, 2012 at 1:54 pm

    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.

    # October 12, 2012 at 2:19 pm

    its the overflow: hidden on #wrap

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.