jquery - 文字上方的转移效果

我已经创建了这样的菜单



我所做的是，当您单击此菜单中的某个项目时，活动项目的类别将转移到新项目。

的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

有人知道如何解决这个问题吗？

最佳答案

好的，我最初怀疑是可以使用z-index解决此问题的。

首先，给active类一个低的值：

z-index: 1;

然后，列表项应该具有很高的价值：

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

Updated fiddle。