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.

```
<body>
    <header>
    HEADER
    </header>
    <div id="opt-slide">
    <span id="toggle">OPTIONS</span>

    <ul id="dropdown">
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
        <li>Option 4</li>
        <li>Option 5</li>
    </ul>
    </div>
</body>
<style>
    * { 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;}

</style>

```

Script:

```
<script>
$(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 > li').click(function() {
        $('#dropdown').animate({marginTop:-top},'slow');
        $('#opt-slide').removeClass('open');
    });

});
</script>

```