Responsive Navigation Menu CSS & Javascript

http://goo.gl/7vVcM5

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<nav class="navbar-collapse collapse" style="padding-top: 8px;">
		
		<ul id="menu-main" class="main-nav"><li id="menu-item-1108" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1108"><a href="https://bid.liveauctions360.com/">Auctions</a></li>
<li id="menu-item-1080242" class="menu-item menu-item-type-taxonomy menu-item-object-product_tag menu-item-1080242"><a href="https://www.liveauctions360.com/product-tag/liveauction/">Auction Lots</a></li>
<li id="menu-item-1080243" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1080243"><a href="https://www.liveauctions360.com/product-tag/buyitnow/?orderby=rand">Private Sales</a></li>
<li id="menu-item-1080244" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1080244"><a href="https://www.liveauctions360.com/products?filter_typeoflist=live-auction&amp;query_type_typeoflist=or">All Lots</a></li>
<li id="menu-item-1107" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1107"><a href="https://www.liveauctions360.com/product-category/ring/?orderby=rand">Rings</a></li>
<li id="menu-item-1106" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1106"><a href="https://www.liveauctions360.com/product-category/earring/?orderby=rand">Earrings</a></li>
<li id="menu-item-1105" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1105"><a href="https://www.liveauctions360.com/product-category/luxury-watches/?orderby=rand">Watches</a></li>
<li id="menu-item-1104" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1104"><a href="https://www.liveauctions360.com/product-category/bracelet/?orderby=rand">Bracelets</a></li>
<li id="menu-item-1103" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1103"><a...

CSS

nav {
	height: 40px !important;
	width: 100% !important;
	font-size: 11pt;
	font-weight: bold;
	border-bottom: 2px solid #283744;
}

nav a {
	color: #000;
	display: inline-block;
	width: 95px;
	text-align: center;
	text-decoration: none;
	line-height: 20px;
	/*text-shadow: 1px 1px 0px #283744;*/
}

nav header {
	display: none;
		
}

nav ul {
	padding: 0;
	margin: 0 auto;
	max-width: 990px;
	width: 100%;
	height: 40px;
}
nav li {
	display: inline;
	float: left;
}



nav li:last-child a {
	border-right: 0;
}
nav a:hover, nav a:active {
	background-color: lightgray;
  color:black;
  
}


/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
	nav { 
  		height: auto;
		
  	}
	
	nav header {
	display: none;
		
}
	
  	nav ul {
  		width: 100%;
  		display: block;
  		height: auto;
		
  	}
  	nav li {
  		width: 50%;
  		float: left;
  		position: relative;
  	}
  	nav li a {
		border-bottom: 1px solid #787878;
		border-right: 1px solid #787878;
	}
  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
		background: #656565;
  	}
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
	nav {
		border-bottom: 0;
		background: #656565;
		width: 100%;
		height: 33px;
		padding: 7px 0 0 0;
		
	}
	
	
		
	nav ul {
		display: none;
		height: auto;
		padding: 10px 0 0 0;
		clear: both;
		background: #656565; 
	
	}
	
	.btn {
		width: 24px;
		height: 22px;
		background: #3CC;
		float: left;
		cursor: pointer;
		margin: 0 10px 0 10px;
		padding: 3px 0px 0 6px;
		-webkit-border-radius: 2px;
     	-moz-border-radius: 2px;
          border-radius: 2px;
		background:url('http://3.bp.blogspot.com/-EznzkHBnKbk/Up4icD70ujI/AAAAAAAADYA/BzRSsyl-5y0/s20/menu-responsive.png') no-repeat center;
	}
	
	.btn .icon {
  display: block;
  width: 18px;
  height: 2px;
  margin-top: 3px;
  background-color: #f5f5f5;
  -webkit-border-radius: 1px;
     -moz-border-radius: 1px;
          border-radius: 1px;
  -webkit-box-shadow: 0 1px...