Text im Hover konnte nicht angezeigt werden

Question

Ich habe ein Problem mit Menüelement Hover. Ich kann den Text nicht sehen, wenn ich auf diesem Element schwebe. Ich habe Z-Index verwendet, um den Text oben zu platzieren, aber nicht funktioniert.

meinen Code,

html:

<div class="menu"> 
<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About Us</a></li> 
    <li><a href="#">Business Verticals</a></li> 
    <li><a href="#">Solutions</a></li> 
    <li><a href="#">Solution Partners</a></li> 
    <li><a href="#">Contact Us</a></li> 
</ul> 
</div> 

css:

.menu{float:right;margin: -10px 0 0;} 
.menu ul li{list-style:none;float:left;border-left:1px solid #e7e7e7;border-right:1px solid #e7e7e7;padding: 10px;} 
.menu ul li a { 
color: #000;float: left;padding: 15px 10px;position: relative;text-decoration: none; 
z-index:10;} 
.menu ul li a:hover{color:#fff;} 
.menu ul li a:hover::before, .menu ul li a:hover::after { 
border-bottom: 6px solid green; 
content: ""; 
height: 100%; 
background: green; 
position: absolute; 
top: -5px; 
color:#fff; 
z-index:5; 
width: calc(50% + 6px); 
border-color: green green -moz-use-text-color; 
border-image: none;border-style: solid solid none;border-width: 3px 3px medium;} 

.menu ul li a:hover::before { 
left: -12px; 
transform: skewY(5deg); 
color:#fff; 
} 
.menu ul li a:hover::after { 
left: 49%; 
transform: skewY(-5deg); 
color:#fff; 
} 

Answer 1

Verwenden z-index in Ihrem

.menu ul li a:hover::before { } 

und

.menu ul li a:hover::after { } 

Arbeiten Demo