在文本顶部的转移效果

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