title: Dropdown falling down animation
body: <p>I want my dropdown animation to appear as if it is falling from above not the slideToggle animation which is like revealing from height 0 to 100%. I use top but its not hiding above so I switch to margin-top. The dropdown animation I want is working but it is over the header and the toggle button when it slides. I set a higher z-index for header and the toggle button but it's not working.</p>
  
  <pre><code>&lt;body&gt;
      &lt;header&gt;
      HEADER
      &lt;/header&gt;
      &lt;div id="opt-slide"&gt;
      &lt;span id="toggle"&gt;OPTIONS&lt;/span&gt;
  
      &lt;ul id="dropdown"&gt;
          &lt;li&gt;Option 1&lt;/li&gt;
          &lt;li&gt;Option 2&lt;/li&gt;
          &lt;li&gt;Option 3&lt;/li&gt;
          &lt;li&gt;Option 4&lt;/li&gt;
          &lt;li&gt;Option 5&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;style&gt;
      * { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;}
      header { height:200px; background:#39F; z-index:4;}
      #opt-slide { width:300px;}
      #toggle { background:#099; display:block; height:50px; color:#FFF; line-height:50px; z-index:4;}
      #dropdown { background:#0C9; list-style:none; margin-top:-450px; z-index:2; opacity:0;}
      #dropdown li { height:40px; line-height:40px;}
      #dropdown li:hover { background:#FAFAFA;}
  
  &lt;/style&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
  
      var top = $('header').height() + $('#toggle').height() + $('#dropdown').height();
  
      $('#toggle').click(function() {
  
          if($('#opt-slide').hasClass('open')){
              $('#dropdown').animate({marginTop:-top, opacity:0},'slow');
              $('#opt-slide').removeClass('open');
          }else{
              $('#dropdown').animate({marginTop:0, opacity:1},'slow');
              $('#opt-slide').addClass('open');
          }
  
  
      });
  
      $('#dropdown &gt; li').click(function() {
          $('#dropdown').animate({marginTop:-top},'slow');
          $('#opt-slide').removeClass('open');
      });
  
  });
  &lt;/script&gt;
  </code></pre>