Simple Responsive jQuery Dropdown from: http://ajtroxell.com/simple-responsive-jquery-dropdown/

dropdown.html

<div class="nav">
  <div class="mobile-nav">Navigation</div>
  	<ul class="primary">
			<li><a href="#link">Link</a></li>
			<li><a class="has-drop">Link w/ Children <span></span></a>
				<ul class="drop">
					<li><a href="#link">Link</a></li>
					<li><a href="#link">Link</a></li>
					<li><a href="#link">Link</a></li>
					<li><a href="#link">Link</a></li>
					<li><a href="#link">Link</a></li>
				</ul>
			</li>
			<li><a class="has-drop" href="#link">Link w/ Children <span></span></a>
				<ul class="drop">
					<li><a href="#link">Link</a></li>
					<li><a href="#link">Link</a></li>
					<li><a href="#link">Link</a></li>
					<li><a href="#link">Link</a></li>
					<li><a href="#link">Link</a></li>
				</ul>
			</li>
			<li><a href="#link">Link</a></li>
			<li><a href="#link">Link</a></li>
		</ul>
	<div class="clear"></div>
</div>

jquery.dropdown.js

var $j = jQuery.noConflict();
// ^ for Wordpress
$j(document).ready(function () {
$j('ul.primary li').click(function () {
    var a = this;
    if ($j('ul', this).is(':visible')) {
        $j('ul', this).slideUp(function () {
            $j(a).removeClass('active');
        });
    } else {
        $j('ul.drop').slideUp();
        $j('ul.primary li').removeClass('active');
        $j('ul', this).slideDown();
        $j(a).addClass('active');
    }
});
$j('body').click(function (a) {
    if (!$j(a.target).is('a')) {
        $j('ul.drop').slideUp();
        $j('ul.primary li').removeClass('active');
    }
});
$j(function () {
    $j('.mobile-nav').click(function (e) {
        $j('.primary').slideToggle(150, "swing");
        e.stopPropagation();
    });
    $j(window).resize(function() {
        $j('ul.drop').slideUp();
        $j('ul.primary li').removeClass('active');
        $j('ul.primary').removeAttr('style');
    });
});
});

style.css

.clear { 
  clear:both; }
.nav {
  display:block;
	width:100%; 
	background:#222; }
 
.mobile-nav {
	visibility: hidden;
	padding: 0;
	height: 0px; }
 
ul.primary {
	background: #222;
	list-style: none;
	height: 45px;
	min-width: 350px;
	position: relative;
	margin: 10px 0 0 0;
	padding: 0;
	float: right; }
 
	ul.primary li {
		float: left;
		display: inline;
		font-weight: bold;
		font-size: 13px;
		max-width: 100%; }
 
		ul.primary li a, ul.drop li a {
			display: block;
			padding: 10px;
			color: white;
			text-decoration: none; }
 
ul.drop li a { padding: 5px; }
 
ul.primary li a:hover, ul.drop li a:hover { background: #444; }
 
ul.primary li, ul.drop li { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }
 
ul.primary li.active > a { background: #444; }
 
a.has-drop { cursor: pointer; }
 
	a.has-drop span {
		margin: -8px 0 0 5px;
		width: 10px;
		height: 5px;
		float: right;
		background: url("drop-caret.png") no-repeat center right; }
 
li.active > a.has-drop span {
	margin: -8px 0 0 5px;
	width: 10px;
	height: 5px;
	float: right;
	background: url("drop-caret-up.png") no-repeat center right; }
 
ul.drop {
	display: none;
	z-index: 999;
	position: relative;
	margin: 0;
	padding: 0;
	min-width: 100%;
	width: auto;
	width: auto;
	list-style: none;
	background: #242424;
	border: none; }
 
	ul.drop li {
		float: none;
		font-weight: normal; }
 
@media only screen and (max-width: 767px) {
	nav {
	display: block;
	width: 100%;
	border: 0px solid white;
	padding: 10px 0; }
 
.mobile-nav {
	visibility: visible;
	height: auto;
	margin: 0 5px;
	padding: 10px 0;
	font-weight: bold;
	color: white;
	cursor: pointer;
	background: url("mobile-nav.png") no-repeat center right; }
 
ul.primary {
	float: none;
	display: none;
	height: auto;
	margin: 0;
	padding: 0; }
 
	ul.primary li {
		display: block;
		float: none;
		border-bottom: 1px solid #444; }
 
		ul.primary li:last-child { border-bottom: none; }
 
ul.drop li, ul.primary li.active { border-bottom: none; }
 
ul.drop li a {
	text-indent: 15px;
	font-size: 12px;
	font-style: italic; }
 
a.has-drop span {
	margin: 5px 0 0 5px;
	width: 10px;
	height: 5px;
	float: right;
	background: url("drop-caret.png") no-repeat center right; }
 
li.active > a.has-drop span {
	margin: 5px 0 0 5px;
	width: 10px;
	height: 5px;
	float: right;
	background: url("drop-caret-up.png") no-repeat center right; }
}