how can I add drop down menus on

On this test page I am messing around with responsive layouts.

HTML for the menu bar:

HTML Code:

---

<nav class="top-nav">
                                               
<ul class="top-nav">
                                                       
<li class="active"><a href="#home" class="scroll">Home <span> </span></a></li>
                                                       
<li class="page-scroll"><a href="#fea" class="scroll">Features<span> </span></a></li>
                                                       
<li class="page-scroll"><a href="#screen" class="scroll">Slideshow<span> </span></a></li>
                                                       
<li class="page-scroll"><a href="#about" class="scroll">About <span> </span></a></li>
                                                       

<li class="page-scroll"><a href="#price" class="scroll">Pricing<span> </span></a></li>
                                                       
<li class="page-scroll"><a href="#dir" class="scroll">Directions<span> </span></a></li>
                                                       
<li class="contatct-active" class="page-scroll"><a href="#contact" class="scroll">Contact </a></li>
                                               
</ul>
                                               
<a href="#" id="pull"><img src="images/nav-icon.png" title="menu" /></a>
                                       
</nav>

---

Code:

---

<!----start-top-nav-script---->
               
<script>
                        $(function() {
                                var pull                = $('#pull');
                                        menu                = $('nav ul');
                                        menuHeight        = menu.height();
                                $(pull).on('click', function(e) {
                                        e.preventDefault();
                                        menu.slideToggle();
                                });
                                $(window).resize(function(){
                                var w = $(window).width();
                                if(w > 320 && menu.is(':hidden')) {
                                        menu.removeAttr('style');
                                }
                            });
                        });
                </script>
                <!----//End-top-nav-script---->

---

oops, forgot the CSS

Code:

---

/*----navbar-nav----*/
.top-nav ul li a{
        color: #999;
        padding: 0.2em 1em;
        font-size: 0.95em;
        font-weight: 500;
        text-align: center;
        text-transform: uppercase;
        position: relative;
}
.top-nav ul li.active a,
.top-nav ul li a:hover{
        color:#0687ff;
}
.logo a{
        display:block;
}
/* top-nav */
.top-nav:before,
.top-nav:after {
    content: " ";
    display: table;
}
.top-nav:after {
    clear: both;
}
nav {
        position: relative;
        float: right;
}
nav ul {
        padding: 0;
        float: right;
        margin: 0.75em 0;
}
nav li {
        display: inline;
        float: left;
        position:relative;
}
nav a {
        color: #fff;
        display: inline-block;
        text-align: center;
        text-decoration: none;
        line-height: 40px;
}
nav a:hover{
        text-decoration:none;
        color:#00A2C1;
}
nav a#pull {
        display: none;
}

---