响应导航栏问题

Question

大家好，希望你能帮忙。

当我在低于768px时打开它时，下面的导航栏不会“保持向下”，它只会反弹回来：/。下面是我正在使用的HTML，CSS和jquery脚本。我也在使用jquery 1.10.2。

HTML：

<nav id="nav"><!--=== navigation bar ===-->

            <!--=== navigation logo ===-->
            <img src="graphics/navlogo.svg" id="logo" alt="K J Wraps" />

            <ul><!--=== navigation links ===--> 
                <li><a href="#contact">Home</a></li>
                <li><a href="#about">Service's</a></li>
                <li><a href="#gallery">Gallery</a></li>
                <li><a href="#services">Contact</a></li>
            </ul>

            <a href="#" id="pull"></a>

        </nav>

CSS：

#nav {
    width: 90%;
    padding: 1% 5%;
    z-index: 9999;
    position: absolute;
}

#logo {

    width: 70px;
    float: left;
    display: block;

}

    #nav ul {
        float: right;
        width: 70%;
    }

        #nav li {
            display: inline;
            float: right;
            margin: 2% 2% 0 2%;
        }

            #nav a {

                font-family: Ribbon;
                color: #ffffff;
                font-size: 0.9em;

            }

                #nav a:hover,#nav a:active {

                    color: #D8AC3D;

                }

            #nav a#pull {  

                display: none;  

            }   
@media only screen and (max-width: 768px) {         
#nav ul {  
        display: none;  
        height: 100%;  
    }  

        #nav a#pull {  
            display: block;  
            float: right;  
            width: 60%;
            position: relative;  
        }  

           #nav a#pull:after {  
                content:"";  
                background: url(../graphics/nav-icon.png) no-repeat;  
                width: 30px;  
                height: 30px;  
                display: inline-block;  
                position: relative;  
                right: 15px;  
                top: 15px;
                bottom: 10px;  
            } 

        #nav li {  

            display: block;  
            float: right;
            width: 100%; 
            margin: 5% 0; 

        }

            #nav a {

                text-align: right;
                float: right;
                width: auto;

            }
   }

剧本：

$(function() {
    var pull = $('#pull');
    var menu = $('nav ul');
    menuHeight= menu.height();

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

    $(window).resize(function(){
        var w = $('window').width();
        if(w>768 && menu.is(':hidden')) {
        menu.removeAttr('style');
        }
    });
});

希望你能提供帮助。 谢谢