Q:

Background Image Appearing Over Text

I have a simple menu that I built and that I'm trying add animations to. I added a slide on hover animation but when you hover over the item the slide animation goes over the text blocking it. I'm pretty sure its going to be an easy fix that I'm over looking but help would be appreciated. The issue is coming from these CSS classes I'm pretty sure:
.nav2Active{
    font-size:16px;
    font-weight:bold;
    padding-top:10px;
    padding-bottom:10px;
    width:100px;
    border-left:thin solid transparent;
    background:transparent;
}

.nav2Active::before{
    content:'';
    background:red;
    position:absolute;
    height:30px;
    width:0%;
    -webkit-transition:width .3s ease-out;
    -moz-transition:width .3s ease-out;
    -ms-transition:width .3s ease-out;
    z-index:0;
}

.nav2Active a{
    color:#000;
    text-decoration:none;
    padding-left:10px;
}

.nav2Active:hover::before{
    border-left:thin solid #F60;
    width:100px;
}

.nav2Active:active{
    background: #CCC;
    border-left: #F60;
}

http://jsfiddle.net/pwfv33hs/

A:

Hay its very easy do this :
.nav2Active:hover::before{
    border-left:thin solid #F60;
    width:100px;
    z-index:-1
}

