JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="k84apomenu">
    <div class="listact"></div>
    <div class="k84apolist">
        <a href="/"><li style="color:#fff !important;">На главную</li></a>
        <a href="/forum"><li>Форум</li></a>
        <a href="/blog"><li>Блог</li></a>
        <a href="/gb"><li>Гостевая</li></a>
        <a href="http://apo-ucoz.com"><li>На apo-ucoz</li></a>
    </div>
</ul>

CSS

.k84apomenu {
    width:100%;
    height:70px;
    background:url('http://www.apo-ucoz.com/images/icons/k84maintube.png') repeat-x;
}
.k84apolist {
    position:absolute;
    z-index:2;
}
.k84apomenu li {
    list-style:none;
    display: inline-block;
    margin:28px 10px 0px 0px;
    padding-left:50px;
    padding-right:50px;
    font-weight: bold;
    color:red;
    text-decoration:italic;
    transition:color .3s ease;
    -o-transition:color .3s ease;
    -webkit-transition:color .3s ease;
    -moz-transition:color .3s ease;
}
.listact {
    position:absolute;
    color: #fff !important;
    height: 70px;
    text-align: center;
    background: url('http://www.apo-ucoz.com/images/icons/k84main.png') no-repeat;
    background-size:100% 70px;
    padding:28px 0px 0px -5px;
    margin-top: 0px !important;
    cursor:pointer;
    transition:all .3s ease;
    -o-transition:all .3s ease;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
}

JavaScript

$(document).ready(function() {
    // ApoTeam (c) 2013
    $('.listact').css({'margin-left': $('.k84apomenu li:first').offset().left-48 + 'px', 'width': parseInt($('.k84apomenu li:first').css('width')) + 100 + 'px'});
    $('.k84apomenu li').mouseover(function () {
        $('.k84apomenu li').removeAttr('style');
        $(this).attr('style', 'color:#fff !important');
        $('.listact').css({'margin-left': $(this).offset().left-48 + 'px', 'width': parseInt($(this).css('width')) + 100 + 'px'});
    });
    // by k84pro & Apocalypse
});