title: Jquery menu fadeIn fadeOut with Timer
body: <p>I have the menu created as below</p>
  
  <p>CSS</p>
  
  <pre><code>#menu, #menu2, #container
  {
      width: 100%;
      margin: 0;
      padding: 1px 0 0 0;
      list-style: none;  
      background: #111;
  }
  
  #menu li, #menu2 li
  {
      float: left;
      padding: 0 0 0 0;
      position: relative;
      line-height: 0;
  }
  
  #menu a, #menu2 a 
  {
      float: left;
      height: 25px;
      padding-top: 0; /* "" */
      padding-bottom: 0; /* "" */
      padding-left: 10px;
      padding-right: 10px;
      color: #999;
      text-transform: uppercase;
      font: bold 12px/25px Arial, Helvetica;
      text-decoration: none;
  }
  
  #menu li:hover &gt; a, #menu2 li:hover &gt; a
  {
      color: #fafafa;
  }
  
  
  #menu li a:hover,  #menu2 li a:hover /* IE6 */
  {
      color: #fafafa;
  }
  
  #menu li:hover &gt; ul, #menu2 li:hover &gt; ul
  {
      /*display: block;*/
  }
  
  /* Sub-menu */
  
  #menu ul, #menu2 ul
  {
      list-style: none;
      margin: 0;
      padding: 0;    
      display: none;
      position: absolute;
      top: 40px; /* "": 50px */
      left: 0;
      z-index: 99999;    
      background: #444;   
  }
  
  #menu ul ul, #menu2 ul ul
  {
    top: 0px;
    left: 195px; /* "": 160px */
  }
  
  #menu ul li, #menu2 ul li
  {
      float: none;
      margin: 0;
      padding: 0;
      display: block;  
      -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
      -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
      box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
  }
  
  #menu ul li:last-child, #menu2 ul li:last-child
  {   
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;    
  }
  
  #menu ul a, #menu2 ul a
  {    
      padding: 10px;
      height: 10px;
      width: 165px; /* "" */
      height: auto;
      line-height: 1;
      display: block;
      white-space: nowrap;
      float: none;
      text-transform: none;
  }
  
  #menu ul a, #menu2 ul a /* IE6 */
  {    
      height: 10px;
  }
  
  *:first-child+html #menu ul a, *:first-child+html #menu2 ul a /* IE7 */
  
  {    
      height: 10px;
  }
  
  #menu ul a:hover, #menu2 ul a:hover
  {
      background: #0186ba;
  }
  
  #menu ul li:first-child &gt; a, #menu2 ul li:first-child &gt; a
  {
  }
  
  #menu ul li:first-child &gt; a:after, #menu2 ul li:first-child &gt; a:after
  {
      content: '';
      position: absolute;
      left: 10px;
      top: -15px; /* "" */
      width: 0;
      height: 0;
      border-left: 12px solid transparent; /* "" */
      border-right: 12px solid transparent; /* "" */
      border-bottom: 16px solid #444; /* "" */
  }
  
  /*#menu ul ul li:first-child a:after, #menu2 ul ul li:first-child a:after
  {
      left: -10px; /* "" */
      /*top: 5px; /*Syed*/
      /*width: 0;
      height: 0;
      border-left: 0; 
      border-bottom: 12px solid transparent; /* "" */
      /*border-top: 12px solid transparent; /* "" */
      /*border-right: 16px solid #444; /* "" */*/*/
  }*/
  
  #menu ul li:first-child a:hover:after, #menu2 ul li:first-child a:hover:after
  {
      border-bottom-color: #0186ba; 
  }
  
  #menu ul ul li:first-child a:hover:after, #menu2 ul ul li:first-child a:hover:after
  {
      border-right-color: #0186ba; 
      border-bottom-color: transparent;   
  }
  
  
  #menu ul li:last-child &gt; a, #menu2 ul li:last-child &gt; a
  {
  }
  
  /* Clear floated elements */
  #menu:after, #menu2:after
  {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
  }
  
  * html #menu, * html #menu2             { zoom: 1; } /* IE6 */
  *:first-child+html #menu, *:first-child+html #menu2 { zoom: 1; } /* IE7 */    
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul id="menu"&gt;
      &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;ABCD&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;a href=""&gt;About My Com&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href=""&gt;News &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href=""&gt;Board&lt;/a&gt;                
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Core &lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="/Pages/membersip.aspx"&gt;Membership&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/Pages/investmets.aspx"&gt;Inves&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/Pages/benefit.aspx"&gt;Ben&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/Pages/students.aspx"&gt;Students Loan&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;               
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="/Pages/executive-committee.aspx"&gt;Executive &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="/Pages/mission-and-vision.aspx"&gt;Mission &lt;/a&gt;               
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="/Pages/statis.aspx"&gt;Stat&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Pages/news.aspx"&gt;News&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/Pages/file-s.aspx"&gt;Reso&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Self &lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Benefit &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Employer &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Member &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="/Pages/faqs.aspx"&gt;FAQs&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Contact Us&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;a href="/Pages/contac.aspx"&gt;Contact&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="/Pages/.aspx"&gt;Customer Service &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="/Pages/te.aspx"&gt;Telephone &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="/Pages/lmap.aspx"&gt; Map&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>JQuery</strong></p>
  
  <pre><code>  $("#menu li").hover(
      function () {
        $(this).children("ul").fadeIn();
      },
     function () {
       timer = setInterval(function () {
          $(this).children("ul").delay(1000).fadeOut();
       }, 1000);   
       clearInterval(timer);
     });
  </code></pre>
  
  <p>Please go to this link to check the code <a href="http://jsfiddle.net/hufsC/2/" rel="nofollow">http://jsfiddle.net/hufsC/2/</a></p>
  
  <p>My questions is when I hover on the menu it should fadeIn slowly and when hover out it should fadeOut slowly. I am also trying to use a timer so that when the user hovers on it, it doesn't fadeIn or fadeOut repeatedly. It should be once only. Can anyone give some expert advices?</p>