How to create li active shape

I'm trying to create a shape in menu header which indicates that is selected (active class), but I can't bring the shape up and align it.

This is what I've tried:

HTML

<li class="active"><a href="#">Market</a></li>

CSS

.active {
   z-index: -1; 
   position: absolute;
   border-bottom: 2px solid #b6ff00;
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
}

EXPECTED RESULT:

JSFIDDLE: http://jsfiddle.net/Q2Dra/