I am facing an issue with the hover effect on my menu element. When I hover over the element, the text does not appear as expected. Even after using z-index to position the text on top, it still doesn't work.
Here is a snippet of my 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;
}