Grow your CSS skills. Land your dream job.

Problem with css dropdown menu and z-index

  • # August 12, 2009 at 8:34 pm

    Hey all,
    I have a css nav with one link in that nav having a dropdown menu. The whole NAV div is positioned relatively. The dropdown box is appearing behind my #Main Div graphic which is also positioned relatively. I looked at other posts like this and thought that using negative z-index would work, but it isn’t.
    Here is my question though. Should I be adding the z-index to the whole NAV div or is it possible to add a z-index to the dropdown menu that comes down when my link is clicked?
    I am going to post a bit of code and maybe someone will have a suggestion.

    Code:
    Code:
    #main {
    position:relative;
    background: url(“clipboardforcontent.png”);
    height:720px;
    width:960px;
    overflow:hidden;
    clear: both;
    z-index:-1;
    }

    #nav{
    padding-top:30px;
    margin:0;
    position: relative;
    z-index:1;
    }

    #nav ul
    {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size:40px;
    }

    #nav li
    {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font: bold 20px arial
    }

    #nav li a
    {display: block;
    margin: 0 1px 0 0;
    padding: 4px 10px;
    width: 80px;
    background: #a98149;
    color: #FFF;
    text-align: center;
    text-decoration: none;

    }

    #nav li a:hover
    {background: #4e2c4a}

    #nav div
    {position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    background: #a98149;
    border: 1px solid #5970B2}

    #nav div a
    {position: relative;
    display: block;
    margin: 0;
    padding: 5px 10px;
    width: 80px;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    background: #4e2c4a;
    color: #FFF;
    font: 11px arial}

    #nav div a:hover
    {background: #a98149;
    color: #FFF}

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".