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

OK、z-index私が最初に疑ったように、これを解決できました。

まず、activeクラスに低い値を指定します。

z-index: 1;

次に、リスト項目は高い価値を得るはずです:

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

フィドルを更新しました。