Appending css to current menu

I am trying to add css marker to my menus to identify current page and current parent menu as follows: http://myweb.com/#about - This is a parent menu with children like http://ift.tt/1zB8YSf - This is a page with content http://ift.tt/17ukFEK - This is a page with content

This is the markup

<ul id="menu"  class="nav-main">                         
<li><a href="#about">About</a> 
<ul>
<li><a href="http://ift.tt/1zB8YSm">History</a></li>
<li><a href="http://ift.tt/17ukHwz">Vision</a></li>
</ul>
</li>
<li><a href="#contact">contact</a> 
<ul>
<li>.....</li>
</ul>
</li>
</ul>

I have the below javascript

<script type="text/javascript">
$("ul#menu.nav-main li a[href='#@Request.Url.LocalPath.Split('/')[1]']").parent("li").addClass("current-menu-item");
</script>

This marks the parent menu and all the children menus instead of the desired. that is; marking only the parent menu and the particular page. For example at http://ift.tt/1zB8YSf page I want only that and http://myweb.com/#about parent menu to be marked. Any help will be appreciated