JSFiddle - React, Tailwind, and code Playground
HTML
<div class="column sidebar" id="right_menu">
<div class="section">
<ul class="links yan-menu"><li class="menu-411 first"><a title="" href="/2012-mali-takvimi" style="background-color: rgb(255, 255, 255);">MALİ / VERGİ TAKVİMİ</a></li>
<li class="menu-431"><a href="/linkler" style="background-color: rgb(255, 255, 255);">LİNKLER</a></li>
<li class="menu-418"><a href="/faydali_bilgiler" style="background-color: rgb(255, 255, 255);">FAYDALI BİLGİLER</a></li>
<li class="menu-413 last"><a href="/sirkuler">SİRKÜLERLER</a></li>
</ul> </div>
</div>
CSS
#right_menu {
list-style-type: none;
position: relative;
z-index: 5;
float: left;
margin-top:45px;
}
#right_menu a {
color: #002C6A;
display: block;
font-family: 'DINPro-Bold';
font-size: 15px;
height: 20px;
padding: 15px 0 15px 80px;
width: 220px;
}
#right_menu a:hover {
color: #FFF;
font-size: 15px;
font-family: 'DINPro-Bold';
}
#right_menu ul li {
list-style-type: none;
border-bottom:1px solid #e5e5e5;
margin: 0 0 0 0;
}
#right_menu a.active {
background: url("../img/left_act.png");
color:#fff;
}
.menu-411 a {
background:url("../img/malitakvim.gif") no-repeat scroll 10% center #FFFFFF !important;
}
.menu-411 a:hover {
background:url("../img/malitakvim_h.gif") no-repeat scroll 10% center #002C6A !important;
}
.menu-413 a{
background:url("../img/sirkuler.gif") no-repeat scroll 10% center #FFFFFF !important;
}
.menu-413 a:hover {
background:url("../img/sirkuler_h.gif") no-repeat scroll 10% center#002C6A !important;
}
.menu-431 a{
background:url("../img/linkler.gif") no-repeat scroll 10% center #FFFFFF !important;
}
.menu-431 a:hover {
background:url("../img/linkler_h.gif") no-repeat scroll 10% center #002C6A !important;
}
.menu-418 a{
background:url("../img/faydali.gif") no-repeat scroll 10% center #FFFFFF !important;
}
.menu-418 a:hover{
background:url("../img/faydali_h.gif") no-repeat scroll 10% center #002C6A !important;
}
ul, ol, .item-list ul {
margin-bottom: 1.5em;
padding-left: 0px;
}
JavaScript
$('.links yan-menu li a ').hover(function() {
$(this).stop();
$(this).animate({ backgroundColor: "#002C6A" }, 'fast');
},
function() {
$(this).stop();
$(this).animate({ backgroundColor: "#ffffff" }, 'fast');
});