When selecting sub-menu item it highlights all items under parent menu

Question

I am working on a single page application and I have nested menu there, when I select any item on sub-menu it does highlight all sibling items under parent menu and parent menu itself, but what I need is just to highlight selected sub-menu and parent menu, please advise:

HTML

           <nav role="navigation">
                    <ul id="main_menu">
                        <li class="active"><a href="/travellist">Travel</a></li>
                        <li><a href="/advancedsearch">Advanced Search</a></li>
                        <li><a href="/creditcardmatcher">Credit Card Matcher</a></li>
                        <li id="maintenance_menu">
                            <a href="">Maintenance</a>
                            <ul id="sub_menu">
                                <li><a href="#">Admin Users</a></li>
                                <li><a href="#">Approval Categories</a></li>
                                <li><a href="#">Approval Groups</a></li>
                                <li><a href="#">Approval Sequence</a></li>
                                <li class="divider" style="background:white"></li>
                                <li><a href="#">Category 4/5 Switch</a></li>
                                <li><a href="#">Employee Type</a></li>
                                <li><a href="#">Funding Type</a></li>
                                <li><a href="#">Help Maintenance</a></li>
                                <li><a href="#">Hire Status</a></li>
                                <li><a href="#">Job Title</a></li>
                                <li><a href="#">Offices</a></li>
                                <li><a href="#">Orientation</a></li>
                            </ul>
                        </li>
                        <li><a href="/help">Help</a></li>
                    </ul>
            </nav>

CSS

.main_header nav{
    background-color: #293955;
    height: 40px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    display:block;
    position:relative;
    font-size:12px;
}

.main_header ul{
    list-style: none;
    margin: 0 auto;
}

.main_header li{
    position:relative;
    float: left;
    display: inline;

}

.main_header  li:hover ul{
    display: block;
    position:absolute;
    width:180px;
    background-color: #293955;
    padding:0px;
}

.main_header ul:after {
    content:".";
    display:block;
    height:0px;
    clear:both;
    visibility:hidden;
}

.main_header ul ul{
    position: absolute;
    display: none;
    left:0px;
    width:0px;
}

.main_header nav a:link, .main_header nav a:visited{
    color: #FFF;
    display: inline-block;
    padding: 10px 25px;
    height: 20px;

}

.main_header nav a:active,
.main_header nav .active a:link, 
.main_header nav .active a:visited{
    background-color: #4590d3;
    color: #FFF;
    text-shadow: none;
}

.main_header nav a:hover{
    background-color: #f3dd3e;
    color: #666;
    text-shadow: none;
}

.main_header nav li a{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

.main_header nav li li a:hover{
    background-color: #f3dd3e;
    color: #666;
    text-shadow: none;
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    -moz-border-bottom-left-radius: 1px;
    -moz-border-bottom-right-radius: 1px;
    -moz-border-top-left-radius: 1px;
    -moz-border-top-right-radius: 1px;
    -webkit-border-bottom-left-radius: 1px;
    -webkit-border-bottom-right-radius: 1px;
    -webkit-border-top-left-radius: 1px;
    -webkit-border-top-right-radius: 1px;
    width:130px;
}

JavaScript

$(document).ready(function () {

    $('#main_menu > li').click(function (e) {
        $('#main_menu > li').removeClass('active');
        $(this).addClass('active');
    });
});

Answer 1

You need to select only the main menu links to be highlighted when active. Change your CSS selectors for the active links to the following;

.main_header nav > ul > li > a:active,
.main_header nav > ul > li.active > a:link, 
.main_header nav > ul > li.active > a:visited

That way, the sub menu links will not appear active just because the parent is.

To additionally highlight the sub menu links when active add these selectors to the same CSS rule;

.main_header nav > ul > li > ul#sub_menu > li a:active,
.main_header nav > ul > li > ul#sub_menu > li.active > a:link, 
.main_header nav > ul > li > ul#sub_menu > li.active > a:visited

The > selector allows you to select only elements that have the correct direct parent.

Hope this helps!