Как создать активную форму li

Question

Я пытаюсь создать форму в заголовке меню, который указывает, что выбран (активный класс), но я не могу принести форму и выровнять ее.

Это то, что я пробовал:

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; 
} 

ОЖИДАЕМЫЕ РЕЗУЛЬТАТЫ:

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

Answer 1

Вы на правильном пути с границей. Вам просто нужно было применить его к псевдоэлементу, а не к li.

Полный пример: http://jsfiddle.net/Q2Dra/4/

Соответствующий код:

.active:after { 
    content:''; 
    border:10px solid transparent; 
    border-bottom:10px solid #b6ff00; 
    position:absolute; 
    bottom:0; 
    left:50%; 
    margin-left:-10px; 
} 

Answer 2

Вы должны использовать псевдо элемент: http://jsfiddle.net/webbymatt/QL7Qr/

HTML

<a href="">Home</a> 

CSS

a { 
    position: relative; 
    background: red; 
    padding: 6px 10px; 
} 
a:after { 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid #fff; 
    content: " "; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    margin-left: -5px; 
}