changing menu color on click is not working properly in jquery mvc

I am using Following Menu with <ul> and <li>s

<ul class="menu">

                <li>@Html.ActionLink("Home", "Index", new { Controller = "Home" })</li> @*, new { @class = "active" }*@
                <li>@Html.ActionLink("About Us", "About", new { Controller = "Home" })</li>
                <li>@Html.ActionLink("Services", "Services", new { Controller = "Home" })</li>      
                <li>@Html.ActionLink("Post Job", "Create", new { Controller = "JobPosting" })</li>
                <li>@Html.ActionLink("Job Search", "Index", new { Controller = "JobPosting" })</li>
                <li>@Html.ActionLink("Contact Us", "Contact", new { Controller = "Home" })</li>
               </ul>

I am Using Following Javascript method

function ApplySelectClassOnMenu() {    
var url = window.location.pathname;
var index = url.lastIndexOf('/');
if (index > 0) {
    url = url.substring(index);
}
$('.menu >li').each(function () {        
    var url1 = $(this).children().attr("href");
    index = url1.lastIndexOf('/');
    if (index > 0) {
        url1 = url1.substring(index);
    }
    if (url1 == url) {            
        $(this).children().addClass('active');
    }
    else {
        $(this).children().removeClass('active');
    }
});

}

and calling it on document.ready as

<script type="text/javascript">
     $(document).ready(function () {
         ApplySelectClassOnMenu();
     });

**Now here problem comes, Colour of menu item does get changed but if you

• don't keep mouse on menu item(<li>item) for few seconds
• don't drag your mouse to that <li> item, if you give url directly in address bar

Colour remain same and is not changed

**

Can anyone help me in resolving this Issue?????