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://myweb.com/about/history -` This is a page with content
`http://myweb.com/about/vision -` 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://www.myweb.com/about/history">History</a></li>
<li><a href="http://www.myweb.com/about/vision">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://myweb.com/about/history> page I want only that and <http://myweb.com/#about> parent menu to be marked. Any help will be appreciated