how can I add drop down menus on

[mlegg]

On this test page (http://www.andrewsamonas.com/) I am messing around with responsive layouts.

HTML for the menu bar:

<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>



<!----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---->

[mlegg]

oops, forgot the CSS


/*----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;
}