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(230, 234, 240);">MALİ / VERGİ TAKVİMİ</a></li>
<li class="menu-413"><a href="/sirkuler" style="background-color: rgb(222, 227, 235);">SİRKÜLERLER</a></li>
<li class="menu-349"><a href="/node/7" style="background-color: rgb(222, 227, 235);">LİNKLER</a></li>
<li class="menu-418 last"><a href="/faydali_bilgiler" style="background-color: rgb(209, 217, 228);">FAYDALI BİLGİLER</a></li>
</ul> </div>
</div>
CSS
#right_menu {
list-style-type: none;
position: relative;
z-index: 5;
float: left;
margin-top:60px;
}
#right_menu a {
color: #002C6A;
display: block;
font-family: 'DINPro-Bold';
font-size: 15px;
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;
}
ul, ol, .item-list ul {
margin-bottom: 1.5em;
padding-left: 0px;
}
JavaScript
$(document).ready(function(){
var bg;
$("#right_menu a").mouseover(function() {
bg = $(this).css('background-color');
$(this).animate({ backgroundColor:'#002C6A'},500);
}).mouseout(function() {
$(this).animate({ backgroundColor:bg},500);
});
});