Jquery Active CSS Menu

Jquery

$(document).ready(function () {
$("ul.menu li a").click(function () {
$("ul.menu li").removeClass("active");
$(this).closest("li").addClass("active");
});
});

CSS
ul.menu
{
margin:0 auto;
padding:0;
width:50%;
overflow:hidden;
border:1px solid #808080;
background:#ff6a00;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
text-align:center;
list-style:none;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6a00), to(#ff0000));
background: -webkit-linear-gradient(top, #ff6a00, #ff0000);
background: -moz-linear-gradient(top, #ff6a00, #ff0000);
background: -ms-linear-gradient(top, #ff6a00, #ff0000);
background: -o-linear-gradient(top, #ff6a00, #ff0000);
}
ul.menu li
{
padding:10px 10px; margin-right:15px;
float:left
}
ul.menu li a
{
color:#fff;
font-family:Arial;
font-size:16px;
text-decoration:none;

}

.active a
{
color:#000 !important
}

HTML

<ul class=”menu”>
<li><a href=”#”>Example</a></li>
<li><a href=”#”>Example</a></li>
<li><a href=”#”>Example</a></li>
<li><a href=”#”>Example</a></li>
<li><a href=”#”>Example</a></li>
</ul>

Call Back Function

CSS
a
{
display:block;
background:linear-gradient(top, #333, #999);
background:-moz-linear-gradient(top, #333, #999);
background:-webkit-linear-gradient(top, #333, #999);
padding:10px;
font-size:24px;
color:#fff;
text-decoration:none;
width:200px;
margin:150px auto;
text-align:center;
border:1px solid #000;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;

}

div
{
display:none;
padding:20px;
background:orange;
border:1px solid #f00;
width:300px;
text-align:center;
margin-left:auto;
margin-right:auto;

}

Script
$(document).ready(function () {
$("a").click(function () {
$(this).animate({ marginTop: "-200px", color: "white",opacity:"0.1" }, function () {
$("div").show("slow", 2000);
});
});
});

HTML
<a href=”#” >Click</a>
<div>Hi !!!!! This is my Firat animation</div>