Grow your CSS skills. Land your dream job.

z-index problem with parent/child relations

  • # December 16, 2008 at 9:07 am

    For a navigation menu, i have this:

    Clean, and semantic.

    And heres the css:

    Code:
    #navigation {
    width: 240px;
    }

    #navigation ul {
    list-style: none;
    margin-bottom: 0;
    }

    #navigation ul li {
    direction: rtl;
    float: right;
    height: 26px;
    border-bottom: 1px solid #c9dbdf;
    position: relative;
    }

    #navigation ul li ul {
    list-style: none;
    position: absolute;
    display: none;
    width: 100px;
    }

    #navigation ul li:hover ul {
    display: block;
    position: absolute;
    left: 0;
    top: 0px;
    border-left: 1px solid #FFF;
    }

    #navigation ul li ul li:hover ul {
    display: block;
    position: absolute;
    left: 140px;
    top: -1px;
    border-left: 1px solid #FFF;
    }

    #navigation ul li a {
    display: block;
    width: 240px;
    height: 25px;
    line-height: 25px;
    background-color: #a5b9be;
    border-bottom: 1px solid #869ba0;
    text-indent: 20px;
    }

    #navigation ul li a:hover {
    background-color: #597076;
    }

    what I’m going to create can be viewed here: http://hcc.ir. In fact, I’m recoding this site, for usability reasons. The navigation is at the top left of the page. You see that when you roll over the item’s, the sub items will appear on top of the other items.

    The problem is that in my code, submenu items will go under the parent’s sibling "li"s (I mean, sub items’ uncles). Even with changing the z-index. It seems that the z-index is not a matter. Is it a bug or there’s a problem with my codes?

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".