JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
                        <ul>
                            <li><a href="index.html">HĂ­rek</a></li>
                            <li><a href="vps.html">VPS</a></li>
                            <li><a href="#">Webhosting</a></li>
                            <li><a href="#">Szerver Hosting</a></li>
                        </ul>
        </div>

CSS

#menu {
    background: #f04206;
    height:30px;
}
#menu ul {
    float: left;
    list-style-type:none;
    position: absolute;
    left: 10px;    
}
#menu li {
    color:#fff;
    list-style-type: none;
    float: left;
    padding: 0px 0px 0px 30px;
    letter-spacing:4px;
}
#menu ul li a:link, #menu ul li a:visited{
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    color:white;
    text-decoration:none;
    position:relative;
}
#menu ul li a:hover, li.active a{
    color:#f04206;

}

JavaScript

$( "li", "#menu" ).hover(function(){
    $( this )
        .stop(true)
        .animate( {
            backgroundColor: "#232426"
             } ,1000);
}, function(){
    $( this )
        .stop(true)
        .animate({
            backgroundColor:"#f04206"
        });
});