title: Keep parent menu item highlighted, after entering into the child menu web link
body: <p>I want to implement a navigation menu on my website. I need to highlight a parent list item after click on its child menu item. This is Working, if it is a single file. I include it in all files. My problem of the below code is, when I click on a child menu item, its parent menu item is highlighted till the loading time. After loading completely, Highlighted color is disappearing. Clicking on the menu item which has no child, is also not highlighted.
  Any help would be greatly received.
  Thanks. My website link is www.theiab.org/IABPHP.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
      &lt;script&gt;
          $(document).ready(function () {
              $('#menu-wplook-main-menu').find('li a').click(function () {
                  //e.preventDefault();
                  $('#menu-wplook-main-menu').find('li a').removeClass('active');
                  $(this).addClass('active');
                  $($(this).closest('li.menu-item').children()[0]).addClass('active');
              });
          });
        &lt;/script&gt;
      &lt;style&gt;
      #menu-wplook-main-menu li a.active{
      color:#e53b51;
      }
      &lt;/style&gt;
      &lt;/head&gt;
  &lt;body&gt;
  &lt;p class="site-title"&gt;&lt;a href="index.php"&gt;&lt;img src="images/logo/iab_logo.png" alt="Indian Association for the Blind" title="Indian Association for the Blind"&gt;&lt;/a&gt;&lt;/p&gt;
  &lt;nav class="navigation"id="nav"&gt;
      &lt;ul id="menu-wplook-main-menu" class="parent" &gt;
          &lt;li class="menu-item"&gt;&lt;a href="#"id="menu-item1"&gt;&lt;div id="whoWeAre"&gt;WHO WE ARE&lt;/div&gt;&lt;/a&gt;
              &lt;ul  class="sub-menu"id="sub-menu1"&gt;
                  &lt;li class="sub-menu-item1"id="sub-menu-item1"&gt;&lt;a href="about-founder.php"&gt;&lt;div id="subMenuItem1"&gt;ABOUT FOUNDER&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="sub-menu-item2"id="sub-Menu-Item2"&gt;&lt;a href="about-iab-growth.php"&gt;&lt;div id="subMenuItem2"&gt;ABOUT IAB&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;!--&lt;li class="menu-item "&gt;&lt;a href="team-iab.php"&gt;TEAM IAB&lt;/a&gt;&lt;/li&gt;--&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="menu-item"&gt;&lt;a href="#"&gt;WHAT WE DO&lt;/a&gt;
              &lt;ul class="sub-menu"id="sub-menu2"&gt;
                  &lt;li class="sub-menu-item3 "&gt;&lt;a href="education.php"&gt;EDUCATION&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="sub-menu-item4"&gt;&lt;a href="career-skills.php"&gt;CAREER &amp;amp; SKILL TRAINING&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="sub-menu-item5"&gt;&lt;a href="residential-services.php"&gt;RESIDENTIAL SERVICES&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="sub-menu-item6"&gt;&lt;a href="support-services.php"&gt;SUPPORT SERVICES&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="sub-menu-item7"&gt;&lt;a href="employment.php"&gt;EMPLOYMENT&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="menu-item"&gt;&lt;a href="award_slide.php"&gt;AWARDS &amp;amp; RECOGNITION&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu-item"&gt;&lt;a href="http://theiab.org/awardsandnews/category/newsandevents/"&gt;NEWS &amp;amp; EVENTS&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu-item"&gt;&lt;a href="contact.php"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>nav {
      float:right; 
      padding:38px 0 0;
  }
  nav li { 
      position:relative; 
      display:inline-block;
  }
  nav ul li a { 
      color:#a0a0a0; 
      font-weight:bold;
  }
  nav li a:hover { 
      color:#e53b51;
      text-decoration: none;
  }
  nav  li:hover .sub-menu{
      visibility:visible;
      opacity: 1;
      transition: all 1s ease;
  }
  ul.sub-menu {
      visibility:hidden;
      opacity:0;
      transition: visibility 1s linear 0.5s,opacity 0.5s linear;
      position:absolute;
      top:27px !important;enter code here
      left:0px;
      z-index:5000;
      list-style:none;
      margin:0;
      padding: 0 !important;
      width: auto;
      min-width:150px;
      box-shadow:0 0px 8px rgba(0,0,0,0.2);
      background:#fff;
  } 
  ul.sub-menu li {
      width:100%;
      float:left;
      border-bottom: 1px solid #ccc;          
      margin: 0 !important;
      line-height:100%;
      padding: 10px 0px !important;
  }
  ul.sub-menu li:last-child {
      border-bottom: none;
  }
  nav   ul.sub-menu li a {
      padding:0px 12px;
      height: auto;
      font-size:13px !important;
      display: block;
  }
  ul.sub-menu li:hover {
      border-top:none !important;
      background: #f9f9f9;
  }
  </code></pre>