Taken from Studio Nashvegas: http://www.studionashvegas.com/responsive-design-2/a-responsive-menu-solution-for-wordpress/

Here is a working example of the responsive select menu: http://www.outandaboutmarketing.com/

A few months ago I modified a really cool WordPress template and started using it for my own clients.  As part of the overhaul, I realized that there was no really good way (included) to turn a WordPress unordered list into a menu that would work on a mobile device.  I tried a few different solutions, but in the end went for the simple one.  A selection (drop-down) menu works well, allows for an infinite number of parent and child categories, and is easily done with a simple jQuery script.

I’ve since modified that script, and wanted to share it as a snippit with you.  Make sure you have jQuery loaded somewhere before this script:

<script>
// Create the dropdown base
$(".menu-main-container li a").addClass("top-level");
$(".menu-main-container .sub-menu li a").addClass("second-level");
$("<select class='main-drop' />").appendTo(".menu-main-container");

// Create default option "Go to..."
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Main Navigation"
}).appendTo(".menu-main-container select");

// Populate dropdown with menu items
$(".menu-main-container li a").each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text(),
"class" : el.attr("class")
}).appendTo(".menu-main-container select");
});

// Allows user to automatically "submit" selection and travel to page
$(".menu-main-container select").change(function() {
window.location = $(this).find("option:selected").val();
});

// adds a dash to second-level classes
$('<p>- </p>').prependTo('option.second-level');

</script>

Here is some css:

.main-drop{
display: none;
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

.main-drop{
display: block;
width: 94%;
margin: 10px 3% 10px;
}

}