title: When selecting sub-menu item it highlights all items under parent menu
body: <p>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:</p>
  
  <p>HTML</p>
  
  <pre><code>           &lt;nav role="navigation"&gt;
                      &lt;ul id="main_menu"&gt;
                          &lt;li class="active"&gt;&lt;a href="/travellist"&gt;Travel&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="/advancedsearch"&gt;Advanced Search&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="/creditcardmatcher"&gt;Credit Card Matcher&lt;/a&gt;&lt;/li&gt;
                          &lt;li id="maintenance_menu"&gt;
                              &lt;a href=""&gt;Maintenance&lt;/a&gt;
                              &lt;ul id="sub_menu"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Admin Users&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Approval Categories&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Approval Groups&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Approval Sequence&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="divider" style="background:white"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Category 4/5 Switch&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Employee Type&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Funding Type&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Help Maintenance&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Hire Status&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Job Title&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Offices&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Orientation&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="/help"&gt;Help&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
              &lt;/nav&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>$(document).ready(function () {
  
      $('#main_menu &gt; li').click(function (e) {
          $('#main_menu &gt; li').removeClass('active');
          $(this).addClass('active');
      });
  });
  </code></pre>