title: Learning Javascript and making a navigation like HP website has
body: <h2>Please Guide me. Thanks in advance.</h2>
  
  <p>I am learning JavaScript and want to make a navigation as <a href="http://www.hp.com/" rel="nofollow noreferrer">HP Website</a> has. I do not want to copy all that, but I am just looking to open/close sub navigation as they have on hover.</p>
  
  <p>So here I write my code and in this code I am not be able to sub navigation to open up, as when it is hover. Please guide me, thanks once again. You can check it <a href="https://codepen.io/arshad88new/pen/NapMwm" rel="nofollow noreferrer"> live on Codepen</a> alse.</p>
  
  <pre><code>$(function () {
      var mainNav = $('.main-nav')
      ,   targetMainNavlistItems = mainNav.find('li[rel]')
      , timerForShowSubNav
      , timerForHideSubNav
      targetMainNavlistItems.each(function () {
          var relAttr = $(this).attr('rel');
          $(this).on({
              'mouseenter' : function () {
                  clearTimeout(timerForHideSubNav);
                  timerForShowSubNav =  setTimeout(showSubNav, 500);
                  $('#' + relAttr).fadeIn(200);
              },
              'mouseleave' : function () {
                  clearTimeout(timerForShowSubNav);
                  timerForHideSubNav = setTimeout(hideSubNav, 500);
                  $('#' + relAttr).fadeOut(200);
              }
          });
      });
      function showSubNav() {
          $('.sub-nav').addClass('is-showing');
      };
      function hideSubNav() {
          $('.sub-nav').removeClass('is-showing');
      };
  });
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;header&gt;
      &lt;div class="header-container"&gt;
          &lt;nav class="main-nav"&gt;
              &lt;ul&gt;
                  &lt;li rel="sub-home"&gt;
                      &lt;a href="#"&gt;Home&lt;/a&gt;    
                  &lt;/li&gt;
                  &lt;li rel="sub-about"&gt;
                      &lt;a href="#"&gt;About&lt;/a&gt;    
                  &lt;/li&gt;
                  &lt;li rel="sub-link1"&gt;
                      &lt;a href="#"&gt;Link-1&lt;/a&gt;    
                  &lt;/li&gt;
                  &lt;li rel="sub-link2"&gt;
                      &lt;a href="#"&gt;Link-2&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Link&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Link&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Link&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt; &lt;!--end main-nav--&gt;
          &lt;nav class="sub-nav"&gt;
              &lt;ul id="sub-home"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home Sub Links&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home Sub Links&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home Sub Links&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home Sub Links&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul id="sub-about"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About Sub Links&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About Sub Links&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About Sub Links&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About Sub Links&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul id="sub-link1"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link1 Sub Links&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link1 Sub Links&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link1 Sub Links&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link1 Sub Links&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
               &lt;ul id="sub-link2"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link2 Sub Links&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link2 Sub Links&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link2 Sub Links&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link2 Sub Links&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;&lt;!-- end sub-nav--&gt;
      &lt;/div&gt;&lt;!--end header-container--&gt;
  &lt;/header&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code> *{
      margin: 0;
      padding: 0;
  }
  body{
      background: #eee;
      font-family: roboto;
      letter-spacing: 1px;
  }
  a{
      color: #531;
      text-decoration: none;
  }
  .header-container{
      margin: 0 100px auto;
  }
  .main-nav ul{
      display: flex;
      border-bottom: 1px solid #ddd;
  }
  .main-nav a{
      padding: 20px 40px;
      display: block;
  }
  .sub-nav{
      height: 0;
      overflow: hidden;
      background: #ddd;
      transition: height 300ms ease;
  }
  .sub-nav.is-showing{
      height: 150px;
  }
  .sub-nav ul{
      padding: 30px;
      display: none;
  }
  </code></pre>