Carmen F. Carmen F. - 3 months ago 9
CSS Question

z-index property doesn't work on hover menu links

I made a menu bar, and custom effect on hover. I wanted the link text to be on top layer. Problem is that when I hover the link in menu, the triangle overlays the text as shown in example, even though I set the

z-index
of a link to 999.

<div id="menu">
<ul>
<li><a href="#home">yyyyyy</a></li>
<li><a href="#news">ppppppp</a></li>
<li><a href="#contact">ggggggg</a></li>
<li><a href="#about">jjjjjjjj</a></li>
</ul>




Jsfiddle:
https://jsfiddle.net/z5zLL1kn/

#menu{
height:50px;
background-color:#fff8dc;
border-bottom:1px #ff8888;}

ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
height:50px;
background-color: #fff8dc;
width:450px;
}

li { float: left; }

li a {
font-family: 'Quicksand', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 44px;
display: block;
color: #ff1636;
text-align: center;
border-bottom:1px #ff8888;
text-decoration: none;
height:49px;
position: relative;
padding-left:15px;
padding-right:15px;
z-index:100;
}

li a:hover:after {
content: "";
display: block;
border: 10px solid #fff8dc;
border-bottom-color: #ff8888;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -10px;
margin-bottom:1px;
}

Answer

Your problem is that the ::after pseudo element is considered a part of the a element, and so changing the z-index of the anchor, will also apply to the pseudo element.

A quick solution would be to move the arrow pseudo element to the list item instead of the link.

Working jsFiddle

li {
  position: relative;
}

li a {
  position: relative;
  z-index:2;
}

li:hover::after {
  position: absolute;
}

Another solution:

As Roko C. Buljan mentioned in the comments, a more straight-forward solution can be to build the arrow pseudo element properly (the second border color needs to be transparent, instead of the background's color:

li a:hover:after {
  border: 10px solid transparent;
  border-bottom-color: #ff8888; 
}

Working jsFiddle