jquery - 在文本顶部转移效果

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

更新了小提琴。