CSS3: анимация наведения содержит ошибку z-index

Хорошо, у меня есть пустой , который вложен в мои

неупорядоченного списка. Диапазон содержит фоновое изображение, которое должно появиться на : hover . Проблема в том, что во время перехода анимации z-index неверен, складывается перед элементом , который предшествует ему в DOM. Однако, как только анимация завершается, порядок наложения корректируется сам. Результатом является визуальный внезапный «щелчок» эффекта, а также ссылка становится неактивной на время перехода CSS3.

Может ли кто-нибудь разобраться в том, что происходит на уровне DOM? Как я могу это исправить?

Вы можете увидеть рабочий пример, демонстрирующий проблему здесь: http://jsfiddle.net/qZkfw/1/

My HTML

        

          

            
Home
            
About
            
Get Fit
                

                  
Exercise Library
                  
Find An Instructor
                  
Fitness Tools
                
            
            
Find An Instructor
            
Get Certified
          
        

my CSS

#nav-main li {
    margin:0;
    padding:5px;
    position: relative;
    display: block;
    float: left;
    margin-left: 10px;
}

#nav-main li a {
    color: #97dd6e;
    font-size: 1.1em;
    text-decoration: none;
    text-align: center;
    margin-right: -7px;
    line-height: 19px;
    z-index: 99;
}

#nav-main li span {
    height: 28px;
    background: transparent url('/images/application/bg_nav_active_repeat.png') repeat-x top center;
    display: block;
    margin: -22px -5px 0 2px;
    padding: 3px 0 0 0;
    z-index: 98;

    opacity: 0;
    visibility: hidden;     
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;   
}
#nav-main li:hover span {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;   

}
#nav-main li span:before, #nav-main li span:after {
    content: '';
    height: 28px;
    width: 7px;
    display: block;
    background: transparent url('/images/application/bg_nav_active_before.png') no-repeat left top;
    position: absolute;
    top: 2px;
    left: 0;
    z-index: 999;
}
#nav-main li span:after {
    background: transparent url('/images/application/bg_nav_active_after.png') no-repeat right top;
    left: 100%;
}