z-index属性不适用于悬停菜单链接

Question

我制作了一个菜单栏，并在悬停时自定义效果。我希望链接文本位于顶层。问题是，当我将菜单中的链接悬停时，三角形覆盖文本，如示例所示，即使我将链接的z-index设置为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 1

您的问题是::after伪元素被视为<{1}}元素的部分，因此更改锚点的a也会适用于伪元素。

快速解决方案是将arrow伪元素移动到列表项而不是链接。

Working jsFiddle

z-index

另一种解决方案：

正如Roko C. Buljan在评论中提到的，一个更直接的解决方案是正确构建箭头伪元素（第二个li { position: relative; } li a { position: relative; z-index:2; } li:hover::after { position: absolute; } 颜色需要border，而不是背景的颜色：

transparent

Working jsFiddle