Highlight current page menu item. Also highlight main menu item when sub menu item is selected

Question

I am working on a project in ASP.net using C#. I have a masterpage in which there is a menu with sub menus for some menu items.
I want the current page menu item be highlighted when selected. Also I want the main menu item be highlighted when any of the sub menu items are selected or their link is opened in the same page.
Any idea or solution using CSS or Javascript is expected. I have searched for solution on this forum but my requirements are different so i have failed till now to find a feasible one.

<pre>

Javascript:

 <script src="../Scripts/jquery-2.1.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#nav').find('li a').click(function () {
                $('#nav').find('li a').removeClass('active');
                $(this).addClass('active');
                $($(this).closest('li.menu-item').children()[0]).addClass('active');
            });
        });

    </script>
</pre>
<pre>

CSS:

#nav {
    height: 50px;
    width: auto;
    position: relative;
    background-color: #ad8f5d;      
}

#nav ul li {

    width:150px;
    text-align:center;
} 

#nav ul li a 
{
    color: Black;
    font-size: 13px;
    font-weight: bold;
    line-height:50px;
    text-decoration: none;  
}

 #nav li a.active 
 {
    color:White; 

 }


#nav ul li a.has_submenu {
    background: transparent url('../Images/submenu-item.jpg') no-repeat scroll right center;
    padding-right: 0px;
}

#nav ul li a.has_submenu:hover, #nav ul li.sfHover a.has_submenu {
    background-image: url('../Images/submenu-item-hover.jpg');
}
#nav ul ul li a.has_submenu {
    background: transparent url('../Images/submenu-item-invert.jpg') no-repeat scroll right center;
    padding-right: 0px;
}
#nav ul ul li a.has_submenu:hover, #nav ul ul li.sfHover a.has_submenu {
    background-image: url('../Images/submenu-item-hover-invert.jpg');
}

#nav ul ul li a { 
    float: none; 
    width: 170px;
}

#nav ul > li:hover > a
{
    background-color: #1f478d;
}

#nav ul ul > li:hover > a
{
    background-color: #1f478d;
}

/*--------------------------Item Image Hover change---------------------CSS----*/

#nav ul > li:hover > a.has_submenu
{
    background-image: url('../Images/submenu-item-hover.jpg');
}

#nav ul ul > li:hover > a.has_submenu
{
   background-image: url('../Images/submenu-item-hover-invert.jpg');
}

/*--------------------------Item Image Hover change---------------------CSS ends----*/


#nav ul li a:hover, #nav ul li.sfHover a{

    background-color: #1f478d;

}
#nav ul ul a 
{

background-color: #ad8f5d;
}

#nav ul li li a:hover, #nav ul li.sfHover li a:hover {
    background-color: #1f478d;

} 


.sf-menu, .sf-menu * 
{
    height:50px;
    margin:         0;
    padding:        0;
    list-style:     none;
}

.sf-menu ul {
    position:       absolute;
    top:            -999em;
    width:          200px; 
    margin-top:     0px;
    padding-top:    0;
}
.sf-menu ul li {
    width:          100%;
}
.sf-menu li:hover {
    visibility:     inherit; 
}
.sf-menu li {
    float:          left;
    position:       relative;
}
.sf-menu a {
    display:        block;
    position:       relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left:           0;
    top:            49px; 
    z-index:        99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left:           170px; 
    top:            0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
    left:           10em; 
    top:            0;
} 
</pre>

<pre>

HTML:

 <div id="nav">
        <ul class="sf-menu">
            <li class="menu-item"><a href="Home.aspx">Home</a></li>
            <li class="menu-item"><a class="has_submenu" href="#">Examples</a>
                <ul>
                    <li><a href="Static.aspx">Static Text Page</a></li>
                    <li><a href="#">Static Frontpage</a></li>
                    <li><a href="#">Another link</a></li>
                </ul>
            </li>
            <li   class="menu-item"><a class="has_submenu" href="#">Products</a>
                <ul>
                    <li><a href="Product.aspx">Product One</a></li>
                    <li><a href="#">Product Two</a></li>
                    <li><a href="#">Product Three</a></li>
                </ul>
            </li>
            <li  class="menu-item"><a href="#">Solutions</a></li>
            <li class="menu-item"><a href="#">Contact</a></li>
        </ul>
      </div>
</pre>

Answer 1

Use this code, if you need more then ask me.

    $(document).ready(function () {
        $('.menu-item').click(function () {
            alert("S");
            $('.menu-item a').css("color","black");
            $(this).find('a').css("color","red");
           // $($(this).closest('li.menu-item').children()[0]).addClass('active');
        });
    });