A CodePen by Andrew. Responsive Navigation - A responsive navigation pattern, is a work in progress.

index.html

<div class="container-nav">
	<nav class="nav-mbl">
		<ul>
			<li><a href="#" class="btn-togglebox btn-nav-main" data-target="nav-main">Main Menu</a></li>
		</ul>
	</nav>
	<nav id="nav-main" class="nav-main cascadingMenu" role="navigation">
		<ul>
			<li><a href="#">Nav</a></li>
			<li><a href="#">Nav</a>
				<ul>
					<li><a href="#">Sub Nav</a></li>
					<li><a href="#">Sub Nav</a></li>
					<li><a href="#">Sub Nav</a></li>
					<li><a href="#">Sub Nav</a></li>
					<li><a href="#">Sub Nav</a></li>
					<li><a href="#">Sub Nav</a></li>
				</ul>
			</li>
			<li><a href="#">Nav</a></li>
			<li><a href="#">Nav</a></li>
			<li><a href="#">Nav</a></li>
			<li><a href="#">Nav</a></li>
		</ul>
	</nav>
</div>

script.js

// Show/hide elements 
$('.btn-nav-main').on('click',function(e){
	e.preventDefault();
	var box = $('.'+$(this).data('target')).slideToggle(), shown = $('.show');
	if (!box.hasClass('show')) box.addClass('show');
	shown.removeClass('show');
});

style.less

//defaults
* { box-sizing: border-box; }
ul, ol {
	padding:0;
	margin:0 0 1.5em;
	list-style:none;
}
//end defaults
.btn-nav-main,.nav-mbl { display:none; }
.nav-main {
	max-width:978px;
	margin:0 auto;
	font-size: 13px;
	> ul {
		display:table;
		width:100%;
		margin:0;
		
		> li {
			display:table-cell;
			position:relative;
			
			> a {
				display:block;
    background: #e53827;
				text-decoration:none;
				text-align:center;
				border-right:1px solid #bbab6a;
				color:#eee;
				height:40px;
				padding:10px 2.3em 0;
				&:hover,&.current {			}
			}
			&:hover ul  { 
				display:block;
			}
		}
	}
}
.nav-main.cascadingMenu  ul ul {
	display: none;
	position:absolute;
	background:#c6b77c;
	z-index:5;
	width: 250px;
	 li {
		width:100%;
		padding:0;
		margin:0;
		display: block;
		position: relative;
		a {
			display:block;
			padding: 5px 10px;
			color:#a74f04;
			font-size: 0.9em;
			text-decoration:none;
			border-bottom: 1px solid #e1e0cf;
			text-transform: none;
			&:hover {
				color:#fff;
			}
		}
	}	
	li.hasChild ul {
			display: none;
		}
	li.hasChild:hover ul {
			display: block;
			left:250px; 
			top:0;
			z-index: 2;
		}
	}
@media only screen and (max-width: 957px) {
	.nav-main > ul > li {		
		a {
			padding: 10px 1.6em 0;
		}
	}
}
@media only screen and (max-width: 833px) {
	.nav-main > ul > li {		
		a {
			padding: 10px 1.1em 0;
		}
	}
}
@media only screen and (min-width: 748px) {
	.nav-main { display: block}
}
/* mobile screens */
@media only screen and (max-width: 747px) {
	.nav-mbl { 
		display:block;		
		ul {
			display:table;
			width:100%;
			margin:0;
			padding:0;
			li {
				display:table-cell;
				vertical-align:top;
				position:relative;
				border-left: 1px solid #bbab6a;
				a { 
					display:block;
					height:45px;
					border-right: 1px solid #bbab6a;
					text-align:center;
					text-decoration:none;
					color:#353827;
					width:100%;
					margin:0 5px;
					padding-top:12px;
					position:relative;
					text-transform: uppercase;
					&:hover{}
				}
			}
		}
		
	}
	.nav-main{ 
		display:none;
	}
	.nav-main {
		> ul {
			background-color: #e0dcbd;
		}
		ul ul li{
    			display: none!important;
    		}
		&.cascadingMenu li {
    		width: 100%;
    		float: left;
    		border-bottom: 1px solid #bbab6a;
    		&:hover{
    			background-color: #b5b190;
    		}
    		&.itemLast{
    			border:none;
    		}
    		a{
    			text-align: left;
    			&:hover{color:#fff;}
    		}
    		
    	}
    }
}