I’m trying to animate a menu by changing the background color, however it does not seem to be working. As I have this running on my local system I am placing the code below.
Thanks,
Tim
CSS:
#header ul{margin:0; padding:0; list-style:none;}
#header ul li{ margin:0; display:inline}
#header ul .last{background:none}
/*#header ul li a{background:url(../images/bg_menu.gif) top left no-repeat; color:#fff; text-decoration:none; width:126px; text-transform:uppercase; text-align:center; display:block; float:left; line-height:58px}*/
#header ul li a{color:#fff; text-decoration:none; width:126px; text-transform:uppercase; text-align:center; display:block; float:left; line-height:58px; background-color: #660000;}
HTML:
<div class="main">
<div id="header">
<div class="menu">
<ul id="list">
<li class="first"><a href="index.html" class="current">Home</a></li>
<li><a href="index-1.html">About Us</a></li>
<li><a href="index-2.html">Mail Delivery</a></li>
<li><a href="index-3.html">Production</a></li>
<li class="last"><a href="index-4.html">Our Clients</a></li>
</ul>
</div>
JS:
$("#list a").hover(function () {
$(this).animate({backgroundColor:"#ffffff"}, 800);
});
