Creating a responsive `wp_nav_menu` in WordPress

header.php

// inside of header.php
<div class='menu_bg'>
		<?php wp_nav_menu( array( 'theme_location'=>'main', 'menu_class' => 'menu', 'depth' => 1)); ?>
</div>

problem

The problem is I am not sure how to properly create a menu bar/dropdown from the array in header.php. 
Currently, the mobile query just floats left and if it cant, loads the menu items on the next line. 
However, it obviously looks really unprofessional and I'd like to create a dropdown menu instead, 
but I cannot use bootstrap or some other CSS framework, just pure CSS.

-Stu.

style.css

/* Inside the mobile media query */
.menu_bg{
	background:#005e90;
	height:48px;
	position:relative;
	top:55px;
	border-top:thin solid #218ac9;
}

.menu{
		padding: 0;
		width:100%;
		margin:0 auto;
	}
	
	.menu-item a {
		height:31px;
		color:#ffffff;
		font-family:'Open Sans', sans-serif;
		padding:0px 23px;
		float: left;
		position: relative;
		font-size:14px;
		padding-top: 17px;
		top:-1px;
		width: 89.75%;
		background:#005e90;
	}

The output of wp_nav_menu is just a ul full of li and a tags. So you could hide the menu for mobile and show a menu toggle button at a certain breakpoint and then when that is clicked, show the menu. Here's a codepen based off of the menu in the screencast on the :hover pseudo class: http://codepen.io/guyroutledge/pen/QwYPeO. The code could be cleaned up a little but the idea is there. Let me know if you need a hand. :)