title: Animate dropdown with jQuery
body: <p>I want to animate my top nav.</p>
  
  <p>At present the dropdown's just jump down on hovering the top nav links.</p>
  
  <p>Dev site: <a href="http://goandco.w7.ext.starberry.com" rel="nofollow">http://goandco.w7.ext.starberry.com</a></p>
  
  <p>I have tried the following:</p>
  
  <pre><code>&lt;script&gt;
  jQuery(document).ready(function() {
      jQuery( '.has-drop-down-a' ).hover(
          function(){
              jQuery(this).children('.drop').slideDown(200);
          },
          function(){
              jQuery(this).children('.drop').slideUp(200);
          }
      );
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>My html is similar to the following:</p>
  
  <pre><code>&lt;ul id="nav"&gt;
     &lt;li class="has-drop-down"&gt;
       &lt;a href="#" class="has-drop-down-a"&gt;Search&lt;/a&gt;
         &lt;div class="drop"&gt;...&lt;/div&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I need the class="drop" div to animate down, instead of being instantaneous.</p>
  
  <p><strong><em>Edit:</em></strong></p>
  
  <p>So, the following is working - except for 2 things:
  1) you have to hover over the link once, then it'll work.
  2) when you move the mouse down over the drop div, it collapses</p>
  
  <pre><code> &lt;script&gt;
          jQuery('body').ready(function() {
              jQuery( '.has-drop-down-a' ).hover(
                  function(){
                      jQuery(this).siblings('.drop').slideDown(400);
                  },
                  function(){
                      jQuery(this).siblings('.drop').slideUp(400);
                  }
              );
          });
          &lt;/script&gt;
  </code></pre>