I've been stumped by a problem that's had me scratching my head for over an hour now. I'm currently working on this page and the issue lies within the menu section.
The navigation list includes a special absolute positioned list item (#magic-line) which is meant to act as the background when hovering over other items using jQuery for a neat effect. However, the problem arises as this item seems to always stay in front of the navigation list-items, resulting in some buggy behavior.
I've already tried setting the z-index of the navigation list-items and their anchors to 200, while giving the absolute positioned list-item a z-index of 100. This should have fixed the issue right away, at least according to my knowledge. But unfortunately, it didn't work out as expected. There must be some detail that I'm missing here. Hopefully, someone can shed some light on this matter.
Here's how the HTML structure looks:
<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 code affecting this HTML section is as follows:
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;
}