<div id="menu">
<div id="menu-top"></div>
<div class="menu-content">
<ul>
<li><a href="">Case Studies</a></li>
<li><a href="">Back Issues</a></li>
<li><a href="">Company Focus</a></li>
<li><a href="">PDF Version</a></li>
<li><a href="">Request a Copy</a></li>
</ul>
</div>
<div id="menu-bottom"></div>
</div>
#menu{
width: 175px;
padding-top: 25px;
padding-left: 15px;
padding-right: 5px;
}
#menu-top{
background: url('http://mysite/images/menu-top.gif') no-repeat;
height: 30px;
}
#menu-bottom{
background: url('http://mysite/images/menu-bottom.gif') no-repeat;
height: 50px;
}
.menu-content{
background-color: #E0E1EB;
}
div.menu-content a{
font-size: 15px;
color: #00305c;
}
div.menu-content ul{
list-style:none;
margin-top: 0px;
margin-bottom: 0px;
line-height: 30px;
margin-left: -20px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/jquery.color.js"></script>
<script>
var originalBG = $(".menu-content ul li").css("background-color");
var fadeColor = "#ddd";
$(".menu-content ul li").hover( function () {
$(this).animate( { backgroundColor:fadeColor}, 450 )
.animate( {backgroundColor:"#000000"}, 950 )
},
function () {}
);
</script>