title: jquery simple drop down content issue
body: <p>I'm trying to code a simple jQuery drop down nav using <code>slideDown</code> and <code>slideUp</code> function, but it doesn't seem to be working properly, please find the css and js code below:</p>
  
  <pre><code>.programsnav ul li{
      float:left;
      margin-left:120px;
      display:block;
      position:relative;
      cursor:pointer;
      padding-bottom:5px;
  }
  .programsnav ul li:hover{
      border-bottom:dashed 1px #fcfe93;
  }
  .programsnav ul li span{
      display:none;
      position:absolute;
      width:930px;
      top:42px;
      left:-371px;
      background:#fcfe93;
      color:#161527;
      padding:10px 15px 15px 15px;
  }
  .programsnav ul li span a{
      display:inline-block;
      padding:0 10px;
      border-right:dotted 1px #161527;
      color:inherit;
      font-size:12px;
      text-transform:uppercase;
  }
  </code></pre>
  
  <p><strong>js</strong></p>
  
  <pre><code>$(document).ready(function(){
       $('#downloadnav li').hover(function() {
              $('span', this).slideDown(100);
          }, function () {
              $('span', this).slideUp(100);       
       });
  });
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;ul id="downloadnav"&gt;
  &lt;li&gt;Movies&lt;span&gt;&lt;a href="#"&gt;Movie1&lt;/a&gt;&lt;a href="#"&gt;Movie2&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
  &lt;li&gt;Songs&lt;span&gt;&lt;a href="#"&gt;Song1&lt;/a&gt;&lt;a href="#"&gt;Song2&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
  &lt;li&gt;Games&lt;span&gt;&lt;a href="#"&gt;Game1&lt;/a&gt;&lt;a href="#"&gt;Game2&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Its keeps animating if i do mouseover on span>a, please help, thanks.</p>