How to change color or background of the menu tab of current page using css & jquery

Hello,
In this tutorial i will show you that how can we change the color or background of the menu tab when we are on that page.

<div class="menu">
            <ul>
                <li><a href="/Home">Home</a></li>
                <li><a href="/About Me">Forms</a></li>
                <li><a href="/Contact Me">Look &amp; Feel</a></li>
                <li><a href="/Blog">Security</a></li>
            </ul>
        </div>

 The css is somthing like this....

.menu ul{
    width: 100%;
    height: 21px;
    list-style: none;
    margin: 0px;
    padding: 0px 0px 0px 3px;
}

  .menu ul li {
    display: block;
    float: left;
    text-align: center;
    margin-left: 3px;
    margin-right: 3px;
    border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-top : 1px solid black;
    background-color: #ececec;
}  
 
 
 .menu ul li a{
    text-decoration: none;
    width: 90%;
    color: black;
    padding-left: 29px;
    padding-right: 29px;
    
 } 
 
  .menu ul li a:hover{
     color: blue;
     text-decoration: underline;
 } 
 
 .menu ul li.active a{
    border-bottom: 2px solid white;
    background-color: white;
}

and a samll jquery which does all magic is ...

<script>
        $(".menu ul li").removeClass("active");
        $(function () {
            var url = window.location.pathname;  
            var activePage = url.substring(url.lastIndexOf('/') + 1);
            $('.menu ul li a').each(function () {
       var currentPage = this.href.substring(this.href.lastIndexOf('/') + 1);
             if (activePage == currentPage) {
               $(this).parent().addClass('active');
                }
            });
        });
</script>