Simple Toggle Method
I like this pattern because it "feels" like a typical drop-down menu feels on a desktop. Users are accustomed to this type of navigation and should be able to navigate this very easily. Just be sure not to load this type of menu with a ton of links - let me say that again: this won't work well with a huge menu (unless you hide the sub-nav). I never really recommend hiding the sub-nav unless you have a huge menu.
I'll leave the styling of this menu up to you - this is just for demonstration purposes.
The CSS:
.nav { width:100%; background-color: #fff; border-bottom: 1px solid #ccc; }
ul.simple-toggle { list-style: none; padding: 0px; margin: 0px; font-weight: bold; text-align: center; }
ul.simple-toggle li { display: inline-block; text-align: left; }
ul.simple-toggle li a { display: block; padding: 15px 10px; text-decoration: none; color: #444; }
ul.simple-toggle li a:hover { background-color: #ccc; }
.anchor-link { display: none; text-align: right; padding: 0 1em 0; text-align: center; padding: 10px 15px; color: #fff; background-color: #0084B4; text-decoration: none; margin: 3px; float: right; }
#mobile-nav { display:none; }
@media (max-width:48.000em){
ul.simple-toggle { display: none; }
.anchor-link, #mobile-nav { display: block; }
ul.open {
background-color: #F4F4F4;
box-shadow: 2px 2px 3px #444444;
display: block;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
right: 5px;
top: 100%;
width: 70%;
z-index: 500;
}
ul.open li { display: block; list-style: none; text-align: center; }
ul.open li a { display: block; padding: 20px 10px; border-bottom: 1px solid #ccc; text-decoration: none; }
ul.open li a:hover { background-color: #ccc; color: #fff; }
}