how can I add drop down menus on

[mlegg]

On this test page 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;
}