active menu css not working

[hermanj13]

CSS\[code\]#menu2{background: black;float: left;list-style: none;margin: 0;padding: 0;width: 220px;}#menu2 li{margin: 0;padding: 0;}#menu2 a{border-bottom: 1px solid #393939;color: #ccc;display: block;margin: 0;padding: 9px 16px;text-decoration: none;}#menu2 a:hover{background: black url("../images/select.png") left center no-repeat;color: #fff;padding: 9px 16px;}#menu2 a:active{background: red;color: #fff;padding: 9px 16px;}\[/code\]JQuery\[code\]<script type="text/javascript"> $(document).ready(function() { $("#menu2 li a").click(function() { $(".active").removeClass("active"); $(this).addClass('active'); }); });</script>\[/code\]HTML\[code\] <ul id="menu2"> <li><a href="http://stackoverflow.com/questions/13814950/Clientlist.aspx">Home</a></li> <li><a href="http://stackoverflow.com/questions/13814950/company.aspx">About us</a></li> <li><a href="http://stackoverflow.com/questions/13814950/CreateInvoice.aspx">Contacts</a></li> </ul>\[/code\]