FlexNav is a mobile-first example of using media queries and jQuery to make a decent site menu with drop downs. Special attention is paid to touch screens using touch events and tap targets. This is something I use to test different navigation techniques and may change as I iterate over different solutions to the problem. Basically I want a simple model to build upon when working on sites from scratch.
Features:
Multiple nested sub menus
Tap targets to reveal sub menus for touch screens
Hover reveal for desktop
Keyboard tab input accessibility
Fallback for no JavaScript
Fast clicks for touch screens (no 300ms delay)
Use class .one-page on the body, .menu-button, and ul.flexnav for single page fixed menu