Question

I’ve created a menu like this

What I’ve done is, when your click an item of this menu, the class of the active item is transferred to the new item.

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

Now, it works fine, the class is transferred to the new active item, but not behind the text.
The background is on top of the text while transferring :

JSFiddle

Anyone knows how to solve this ?

Answer 1

OK, was able to solve this with z-index as I’ve initially suspected.

First, give the active class low value:

z-index: 1;

Then the list items should get high value:

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

Updated fiddle.