Question

I’m trying to wrap my head around a problem i’m staring at for an hour now. I’m working on this page, and my problem is with the menu.

I have a navigation list with one special absolute positioned list-item (#magic-line) to form the background when hovering the other items (with jQuery), to give it a nice effect. The problem is that it keeps staying in front of the navigation list-items, causing buggy behavior.

I’ve been giving the navigation list-items and the anchors in it a z-index 200, while giving the absolute positioned list-item a z-index of 100. This should solve the problem straight away as far as I know. But apparently it doesn’t. I’m probably overlooking a blunt detail. Hope you guys can give a new light to this.

The HTML looks like this:

<nav>
    <ul class="group">
        <li class="current"><a href="/v3/" data-section="#start">Home</a></li>
        <li><a href="/v3/over-mij/" data-section="#over-mij">Over Mij</a></li>
        <li><a href="/v3/portfolio/" data-section="#portfolio">Portfolio</a></li>
        <li><a href="/v3/inspiraties/" data-section="#inspiraties">Inspiraties</a></li>
        <li><a href="/v3/contact/" data-section="#contact">Contact</a></li>
        <li id="magic-line" style="width: 63px; height: 48px; left: 0px; overflow: hidden;"></li>
    </ul>
</nav>

The CSS part affecting this HTML is:

nav{
    color: #edebe6;
    font-size: 1.2em;
}
nav ul{
    padding: 0;
    list-style: none;
    display: block;
    position: relative;
}
nav ul li{
    float: left;
    z-index: 200;
}
nav ul li a{
    color: #edebe6;
    text-decoration: none;
    display: block;
    float: left;
    padding: 10px;
    border: none;
    z-index: 200;
}
nav ul li a:hover{
    background-color: transparent;
}
nav #magic-line{
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    background-color: #d3643b;
    z-index: 100;
}

Answer 1

After testing, if you set position: relative on your menu items, it works as expected.

nav ul li a {
    border: medium none;
    color: #EDEBE6;
    display: block;
    float: left;
    padding: 10px;
    position: relative;
    text-decoration: none;
    z-index: 200;
}

The z-order was not considered for these items.