A CodePen by Francisco Campos. Responsive navigation multilevel - A responsive navigation menu for a project of mine. I needed the top level links (team, news, prestations, our work, contact us) to be still clickable. It's bases on Brad Frost's demo http://codepen.io/bradfrost/full/qwJvF

index.html

<div class="menu-wrapper">

	<a href="#menu" class="menu-link">	Menu<span class="ico-caret-down right" aria-hidden="true"></span>
	</a>
	<nav id="menu" role="navigation">
		<div class="menu">
			<ul  class="menu">
				<li>
					<a href="#">Team</a>
				</li>
				<li  class=" current-menu-item">
					<a href="#">News</a>
				</li>
				<li  class="has-subnav">
					<a href="#">Our services</a>
					<ul class="sub-menu">
						<li>
							<a href="#">Webdesign</a>
						</li>
						<li>
							<a href="#">Graphic identity</a>
						</li>
						<li>
							<a href="#">Copywriting</a>
						</li>
						<li>
							<a href="#">SEO & a longer menu item</a>
						</li>
						<li>
							<a href="#">Social networking</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">Our Work</a>
				</li>
				<li>
					<a href="#">Contact us</a>
				</li>
			</ul>
		</div>
	</nav>
</div>
<div class="content">
  <p>A responsive navigation menu for a project of mine. I needed the top level links (team, news, our services, our work, contact us) to be still clickable (because they send the user to a special page) so I needed to "split" the "presentation" link with an arrow for the responsive part.</p>
  <p> Also note that font for the arrow are loaded from my dropbox so it won't appear on Firefox and IE (crossdomain issues I guess)</p>
</div>

script.js

$(document).ready(function() {
  	 	

/* the Responsive menu script */
 	$('body').addClass('js');
		  var $menu = $('#menu'),
		  	  $menulink = $('.menu-link'),
		  	  $menuTrigger = $('.has-subnav > a');
		
	$menulink.click(function(e) {
			e.preventDefault();
			$menulink.toggleClass('active');
			$menu.toggleClass('active');
	});

	var add_toggle_links = function() { 		
	 	if ($('.menu-link').is(":visible")){
	 		if ($(".toggle-link").length > 0){
	 		}
	 		else{
	 			$('.has-subnav > a').before('<span class="toggle-link"> Open submenu </span>');
	 			$('.toggle-link').click(function(e) {		
					var $this = $(this);
					$this.toggleClass('active').siblings('ul').toggleClass('active');
				});	
	 		}
	 	}
		else{
			$('.toggle-link').empty();
		}
	 }
	add_toggle_links();
	$(window).bind("resize", add_toggle_links);	
		
		});

style.less

body, html{
  height:100% ;/* correct bug for chrome display on codepen ? */
}
/* colors mixins and all the good stuff */

@red : rgb(185, 33, 32);
@lred: rgb(221, 73, 73);
@vlred: rgba(245,212,212,1);
@light:rgba(255, 255, 255, 1);
@drred: darken(@red,7%);
@90plight:fadeout(@light,10%);

nav{
  display:block;
}

.right {
    float: right;
    margin-left: 1em;
}

/* icons */
@font-face {
font-family: 'icomoon';	src:url('https://dl.dropbox.com/u/26865764/icomoon.eot');	src:url('https://dl.dropbox.com/u/26865764/icomoon.eot?#iefix') format('embedded-opentype'),		url('https://dl.dropbox.com/u/26865764/icomoon.dev.svg#icomoon') format('svg'),		url('https://dl.dropbox.com/u/26865764/icomoon.woff') format('woff'),		url('https://dl.dropbox.com/u/26865764/icomoon.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

.ico-heart:before, .ico-letter:before, .ico-file:before, .ico-real:before, .ico-pen:before, .ico-user:before, .ico-rocket:before, .ico-arrow-right:before, .ico-arrow-left:before, .ico-arrow-left-2:before, .ico-arrow-right-2:before, .ico-caret-down:before, .ico-caret-up:before, .ico-caret-left:before, .ico-caret-right:before, .ico-facebook:before, .ico-twitter:before, .ico-google-plus:before {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.ico-caret-down:before {
	content: "\f0d7";
}
.ico-caret-up:before {
	content: "\f0d8";
}

/* ----------------------------- */
/* == Menu */
/* ----------------------------- */

.menu-wrapper{    
    position:relative;
    z-index:10;
    font-family: 'Economica', sans-serif;  
    font-size:1.857em;
    text-transform:uppercase;
    padding-top:2px;
    padding-bottom:2px;
    background:@red; 

    .menu{
        margin: 0;
        padding-left: 0;
        list-style: none; 
        text-align:center;
    }
    .menu > li {
        position: relative;
        padding: 0.7em  0;
        display:inline-block;
    }  

    ul.menu,
    a.menu-link{
        border-top:1px dashed @lred;
        border-bottom:1px dashed @lred;
    }
    /* the hidden link for RWD nav */
    a.menu-link {
        display: none;
        padding: 0.7em  0;
        background:@red; 
    }

    /* the rest of the menu lvl 1 */
    a {    
        display: block;
        position:relative;
        padding: 0 0.5em;
        margin:0 0.2em;
        line-height: 1.3em; 
        color:@light;   
        text-decoration: none;
        border-bottom: 1px solid transparent;
        &:hover{
           border-bottom: 1px solid @90plight;           
           transition:all 0.5s;
        }
    } 

    /* current links */
    .menu > .current-menu-item > a,
    .menu > .current-menu-ancestor > a {
        position: relative;
        z-index:12;
        background:@vlred;
        color:@red;
        border-bottom: 1px solid transparent;
        &:hover{
            background:lighten(@vlred,10%);
            &:after{
               border-top-color: lighten(@vlred,10%); 
            }
        }
        &:after {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-color: rgba(255, 255, 255, 0);
            border-top-color: @vlred;
            border-width: 5px;
            left: 50%;
            margin-left: -5px;
        }
    }
       
    li+ li a:before{
        content:"*";
        position:absolute;
        left:-0.5em;
        top:0.2em;
        color:@light;
        opacity:0.8;
        font-family:Arial, Verdana, sans-serif;
    }
    

    /* submenu ! */
    .sub-menu {
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        margin: 18px 0 0 -0.7em;
        padding:3px 0 0 0;
        position: absolute;               
        max-height: 0em;
        overflow: hidden;        
        list-style: none outside none;
        text-align:left;
        text-transform:none;
        li{
            display:block;
            background: @drred;
            margin-left:0.7em;
            margin-right: 0.7em;        }
        a{
            margin:0;
            white-space:nowrap; 
            line-height: 1.8em;
            border:none;
            &:hover{
                background:darken(@red,15%)
            }
        }
        li:last-child{
            padding-bottom:0.26em;
            a{            
            border-bottom:1px dashed @lred;
            } 
        }
    }

    /* unhide the 2nd level */
    li:hover .sub-menu{ 
        max-height: 30em; 
        transition: max-height 0.5s;       
    } 
}



/* Responsive Menu */

@media screen and (max-width: 768px) {
    .js .menu-wrapper nav[role=navigation] {
        overflow:hidden;
        max-height: 0em;

    } 
    .js .menu-wrapper nav[role=navigation].active {
        max-height: 30em;
        transition: max-height 0.5s ease-out;
    }
    .menu-wrapper{   
        a.menu-link{
            display:block;
            width:auto;
            padding-right:15px;
            padding-left:10px;
            border:none;
            margin:0;
            &:hover{
                background:@drred;
            }
            &.active .ico-caret-down:before{
                content: "\f0d8";
            }
        } 

        .menu .menu{
             padding-bottom: 5px;
        }
        .menu  li {
            display:block;
            border:1px solid pink;
            border:none;
        }
        .menu > li{
            padding:0px;
            border:none;
            &+li{
                border-top:1px dashed @lred;
            }
        } 
        .menu a{
            padding:0.5em 0;
            margin:0px;
            border:none;
            &:hover{
                background:@drred;
            }
        } 
        .menu .rightalign{
             float:none;
        }
        li + li a:before{
            content:"";
        }

        /* unhide the 2nd level */
        li:hover .sub-menu{ 
            max-height: 0em; 
            transition:none;      
        } 
        .sub-menu{    
            background:none;
            margin-left:0px;
            margin-top:1px;
            display:block;
            width: 100%;
            li,
            li a{
                margin:0;
                display:block;
                width:100%;
            }
            a{
                padding-left:0.8em;
                &:hover{
                   background:darken(@red,15%);
                }
            }
            li{
                border-bottom:1px dashed @lred;
            }
            li:last-child{
                padding:0;
                a{
                    border:none;
                }
            }
        }
        .menu .has-subnav{
            position:relative;
        }    
        li .sub-menu.active{        
            max-height: 30em;
            overflow:visible;
            position:relative;
            z-index:9;
            transition: max-height 0.5s ease-out;
        }

        /* styling the toggle menu */
        .toggle-link{ 
            height:67px;
            width: 60px; 
            display:block;
            position:absolute;
            right:0px;                 
            z-index:200;
            font-size:0em;      
            cursor:pointer;
            font-family: 'icomoon';
            speak: none;
            font-style: normal;
            font-weight: normal;
            line-height: 1;
            -webkit-font-smoothing: antialiased;        
            &:hover{
                transition:all 0.2s;
                background:lighten(@red,5%);
            }
        }
        /* arrow to indicate that we have subnav*/
         .menu .has-subnav > .toggle-link:after{        
            content: "\f0d7";           
            position:absolute;            
            width:50px;
            top:50%;
            margin-top:-15px;
            bottom:50%;
            right:4px;
            font-size:28px;
            color:#fff;
        }
         .menu .has-subnav  > .toggle-link.active:after{
             content: "\f0d8";
             margin-top:-18px;
        }
    }
}
.content{
 max-width:950px;
 min-height:500px;
 margin:30px auto;
}