title: Navigation link does not highlighting the current menu, when submenu is clicked
body: <p>I have written jquery code for highlighting menu onclick of each <code>respective submenu</code>. Now here what happening is</p>
  
  <p>I have one same link in three of the <code>sub-menu's</code>, so when I click one of them, it is highlighting the last menu.</p>
  
  <p>Here is my code:-</p>
  
  <pre><code>var str = location.href.toLowerCase();
          $("#menu li a").each(function () {
              if (str.indexOf($(this).attr("href").toLowerCase()) &gt; -1) {
                   $("li.activelink").removeClass("activelink");
                   $(this).parent().addClass("activelink");
                   $(this).parents("#menu ul").parent().addClass("activelink");
               }
           });
           $("li.activelink").parents().each(function () {
               if ($(this).is("li")) {
                   $(this).addClass("activelink");
               }
           });
           $("li.activelink").parents("#menu ul").parent().each(function () {
               if ($(this).is("li")) {
                   $(this).addClass("activelink");
               }
           });
           $("#menu li .para1 a").each(function () {
               if (str.indexOf($(this).attr("href").toLowerCase()) &gt; -1) {
                   $("li.activelink").removeClass("activelink");
                   $(this).parent().addClass("activelink");
                   $(this).parents().parent().addClass("activelink");
               }
           });
           $("li.activelink").parents().each(function () {
               if ($(this).is("li")) {
                   $(this).addClass("activelink");
               }
           }); 
  </code></pre>
  
  <p>Have a look here</p>
  
  <p><img src="https://i.stack.imgur.com/wsxHu.png" alt="Screenshot of the menu"></p>
  
  <p>Also see the HTML of the same in the <a href="http://jsfiddle.net/nadeem/arh3uoj6/1/" rel="nofollow noreferrer">Js fiddle</a>
  Please suggest something for the same</p>