Transfert эффект поверх текста

Question

Я создал меню, как этот

Что я сделал это, когда ваш нажмите пункт этого меню, класс активного элемента передается к новому элементу.

HTML

<ul class="navigation"> 
    <li class="home"><a href="#/home">home</a></li> 
    <li class="about"><a href="#/about">about</a></li> 
    <li class="work"><a href="#/work">work</a></li>   
    <li class="contact"><a href="#/contact">contact</a></li>  
</ul> 

JQuery

active.removeClass('active'); 
    active.effect("transfer", { to: newBtn, className: "active" }, 300,function(){ 
    newBtn.addClass('active'); 
    active = newBtn; 
}); 

CSS

.active{ 
    background-color: @ed; 
    border-top:1px solid white; 
    border-bottom:1px solid @9; 
    .radius(13px); 
    a{ color:#333;} 
} 

Теперь он работает отлично, класс тр отсылается к новому активному элементу, но не позади текста. Фон находится на верхней части текста при переводе:

JSFiddle

Каждый знает, как решить эту проблему?

Answer 1

ОК, смог решить этот вопрос с помощью z-index, как я подозревал.

Во-первых, дать active класс низкое значение:

z-index: 1; 

Затем элементы списка должны получить высокое значение:

.navigation li { 
    position: relative; 
    z-index: 100; 
} 

Updated fiddle.