title: jquery submenu <li> fadeIn one after the other on hover
body: <p>I have a pop-up submenu that when you hover your mouse over the parent <code>&lt;li&gt;</code> each child <code>&lt;li&gt;</code> fades in individually.  And when your mouse leaves, the entire can just fade out at once.</p>
  
  <p>So far, I can fadeIn them individually using really bad jQuery code, but it only fires once. And the fadeOut has never worked.  It never worked when I just had the entire pop-up menu fading in at the same time. <br><br>
  Here it is in the current state: <a href="http://www.fixxed.net/test/pg/carousel/profiles.html" rel="nofollow">http://www.fixxed.net/test/pg/carousel/profiles.html</a></p>
  
  <p>Here's the jQuery code:</p>
  
  <pre><code>$('#menu li').hover(
          function () {
              //show its submenu
  
              $('ul .1', this).hide().stop(true, true).fadeIn(700);
              $('ul .2', this).hide().stop(true, true).delay(300).fadeIn(700);
              $('ul .3', this).hide().stop(true, true).delay(600).fadeIn(700);
              $('ul .4', this).hide().stop(true, true).delay(900).fadeIn(700);
              $('ul .5', this).hide().stop(true, true).delay(1200).fadeIn(700);
              $('ul .6', this).hide().stop(true, true).delay(1500).fadeIn(700);
  
          }, 
          function () {
              //hide its submenu
              $('ul', this).stop(true, true).fadeOut(700);            
          }
  </code></pre>
  
  <p>Here's a simplified version of the HTML:</p>
  
  <pre><code>&lt;li class="about"&gt;&lt;a href="#"&gt;&lt;/a&gt;
         &lt;ul&gt;
              &lt;li class="6"&gt;&lt;a href="../paul-gregory-photography-bio.html"&gt;BIO&lt;/a&gt;&lt;/li&gt;
              &lt;li class="5"&gt;&lt;a href="../paul-gregory-photography-clients.html"&gt;CLIENTS&lt;/a&gt;&lt;/li&gt;
              &lt;li class="4"&gt;&lt;a href="#"&gt;THE SESSION&lt;/a&gt;&lt;/li&gt;
              &lt;li class="3"&gt;&lt;a href="../paul-gregory-photography-pricing.html"&gt;Pricing&lt;/a&gt;&lt;/li&gt;
              &lt;li class="2"&gt;&lt;a href="#"&gt;THINGS PAUL SAYS&lt;/a&gt;&lt;/li&gt;
              &lt;li class="1" style="padding-bottom:5px"&gt;&lt;a href="#"&gt;Interview&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
  &lt;/li&gt;  
  </code></pre>
  
  <p>I believe the reason it is not fading out when the mouse leaves is because of the CSS. There's a lot going with the CSS since it's a pop-up menu instead of a drop-down but here it all is (except for the sprite stuff):</p>
  
  <pre><code>#menu li ul li a {
      display:block;
      text-decoration:none;
      text-align:left;
      width:100%;
      height:100%;
      background:#000;
  }
  #menu ul {
      padding:0;
      margin:0;
      list-style-type: none;
  }
  #menu ul li {
      float:left;
      position:relative;
      display:inline;
  }
  #menu ul li ul {
      visibility:hidden;
      position:absolute;
      color:#FFFFFF
  }
  #menu table {
      border-collapse:collapse;
      margin:0;
      padding:0;
      font-size:1em;
      margin:-1px;
  }
  #menu ul li:hover a, #menu ul li a:hover {
      color:#000;
  }
  #menu ul li:hover ul, #menu ul li a:hover ul {
      visibility:visible;
      bottom:26px;
      left:5px;
  }
  .display {
      display:block;
      width:150px;
      height: 18px;
      clear:both;
      font-family:Georgia, "Times New Roman", Times, serif;
      font-size:14px;
      font-style:italic
  }
  #menu ul li:hover ul li, #menu ul li a:hover ul li {
      display:block;
      width:150px;
      height: 18px;
      clear:both;
      font-family:Georgia, "Times New Roman", Times, serif;
      font-size:14px;
      font-style:italic
  }
  #menu ul li:hover ul li ul, #menu ul li a:hover ul li a ul {
      visibility:hidden;
      position:absolute;
  }
  #menu ul li:hover ul li a, #menu ul li a:hover ul li a {
      display:block;
      color:#DAC4AF;
      width:100%;
      padding-left:0px;
  }
  #menu ul li:hover ul li a:hover, #menu ul li a:hover ul li a:hover {
      color:#FFF;
  }
  #menu ul li:hover ul li:hover ul, #menu ul li a:hover ul li a:hover ul {
      visibility:visible;
      left:210px;
      bottom:0;
  }
  #menu ul li:hover ul li:hover ul li a, #menu ul li a:hover ul li a:hover ul li a {
      color:#000;
  }
  #menu ul li:hover ul li:hover ul li a:hover, #menu ul li a:hover ul li a:hover ul li a:hover {
      color:#000;
  }
  #menu ul li:hover ul.left, #menu ul li a:hover ul.left {
      left:-105px;
  }
  #menu ul li:hover ul li:hover ul.left, #menu ul li a:hover ul li a:hover ul.left {
      left:-210px;
      width:209px;
  }
  .menu li {
      text-indent:-9999px;
      display:inline;
      float:left;
      position:relative
  }
  .menu li a {
      background:url(assets/menu.png) no-repeat;
      width:100%;
      height:100%;
      display:block;
  }
  </code></pre>