Not Smooth Jquery Slide Down Menu

Question

I'm trying to add a drop down menu to my site so that when its below a certain size the menu fits the screen(Like everyone else). It's been going fine until now, I'm virtually done however the slide effect is not smooth.

here is the site: http://www.divisionforty.com/wallspace/ Just resize the page and the menu will change.

here is the code i'm using:

Jquery:

<script>
    $(function() {
        var pull        = $('#pull');
                menu        = $('nav ul');

        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle("fast");
        });

        $(window).resize(function(){
            var w = $(this).width();

            if(w > 900 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });

        $('li').on('click', function(e) {               
            var w = $(window).width();
            if(w < 900 ) {
                menu.slideToggle("fast");
            }
        });


    }); 
    </script>

css:

 @media screen and (max-width: 900px) {
   #pull{
            right:10px;
            display:  block;
            position: absolute;
            width:50px;
            background-image: url("../img/nav_icon.png") no-repeat;

}
    #nav{
            display:none;
            position: absolute;
            padding-top:0;

    }

    #nav li {
        width: 100%;
        float: left;
        position: relative;
        border-bottom: 1px solid #262626;
      }
      #nav a {
          text-align: left;
          width: 100%;
          text-indent: 25px;
            background: #ffffff;          
      }      
      #nav a:hover {
          color:#afafaf;
      }


}  

That is all I believe is required. Hopefully someone can help me get this sorted!

Denver

Answer 1

You might want to incorporate the easing plugin for smoother animation.

Answer 2

Set height to your #nav.

#nav { height: 100% }