0

I've got a problem with menu element hover. I am unable to see the text upon hovering on that element. I used z-index to place the text on top,but not working.

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;
}
Nag
  • 806
  • 1
  • 13
  • 28
  • Can u add a runnable version (see this https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) – Jaimes May 07 '16 at 06:56
  • 1
    It worked correctly when I used negative z-index (eg. -5) on `.menu ul li a:hover::before, .menu ul li a:hover::after`. Not sure why though. – Lukas May 07 '16 at 07:01

1 Answers1

0

Use z-index in your 

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

and 

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

Working Demo

AlwaysStudent
  • 1,354
  • 18
  • 49