Activating Menu

Hi,

I have a menu, when the user click on the menu it should get a background color to #a51d43

this is what i have and it's not working

#nav ul li a {
 /* margin:10px; */
    color:#FFF;
 /* padding:4px;
    font-size:20px;
    text-decoration:none; */
    }

#nav ul li a:hover {
    border-bottom:3px #FFF solid;
 	background-color:#000000;
    }

#nav ul li .active {
    border-bottom:3px #FFF solid;
 	background-color:#a51d43;
    }



    <menu id="nav">
    <ul class="categories" style="font-size:12px;color:#ffffff;">
      <li><a href="index.cfm" class="index" style="padding-left:-5px; padding-right:15px;color:#ffffff;font-weight:bold;">Home</a></li>
      <li><a href="#" class="VersionHist" style="color:#ffffff;font-weight:bold;">Version History</a></li>
      <li><a href="AddRule.cfm" class="AddRule" target="_self" style="color:#ffffff;font-weight:bold;">Add New Testing Rule</a></li>
    </ul>
    </menu>





$(document).ready(function () {
	$.ajaxSetup({ cache: false });
	
	var url = /[^\\\/:*?"<>|\r\n]+$/i.exec(window.location.href)[0];

    // passes on every "a" tag 
    $("#nav ul li a").each(function() {
            // checks if its the same on the address bar
        if(url == (/[^\\\/:*?"<>|\r\n]+$/i.exec(this.href)[0])) { 
            $(this).closest("li").addClass("active");
        }
		else if(url == "Index.cfm"){
			$(".Alert").closest("li").addClass("active");
		}
		else if(url == "AddRule.cfm"){
			$(".Alert").closest("li").addClass("active");
		}

		
    });

Select all Open in new window