This is based on the excellent example here.

If you get problems with the menu being hidden behind other screen elements below it, ensure that if whatever divs etc the menu is contained within have a z-index specified it is higher than the z-index of lower down screen elements.  Although the drop menu specifies a z-index of 1000 to float above anything else, if it is cotnainted within anything that has a lower z-index specified that  will wipe outs its z-index back down to the containing z-index value!

The HTML

<nav class="nav_my_menu">
	<ul>
		<li class="my_menu_button"><a href=".">Menu</a></li>
		<li class="my_menu_item"><a href="#">Page 1</a></li>
		<li class="my_menu_item"><a href="#">Page 2</a></li>
		<li class="my_menu_item"><a href="#">Page 3</a></li>
		<li class="my_menu_item"><a href="#">Contact Us</a></li>
	</ul>
</nav>

The CSS

/*----- RESPONSIVE MENU -----*/
.nav_my_menu ul {
	margin: 0;
	padding: 0;
}
.nav_my_menu li {
	list-style: none;
	display: inline-block;
	height: 40px;
	margin-right: 6px;
	margin-left: 6px;
}
.nav_my_menu a {
	text-decoration: none;
	color: #999;
}
.nav_my_menu a:hover {
	color: #000;
}
.nav_my_menu .my_menu_button a {
	display: none;
}
.nav_my_menu.right ul {
	text-align: right;			/*Set alignment*/
}

@media screen and (max-width: 600px) {
	/*----- CHANGE MENU TO DROP DOWN BUTTON -----*/
	.nav_my_menu {
		position: relative;
		min-height: 40px;
	}	
	.nav_my_menu ul {
		position: absolute;
		top: 0;
		left: 0;
		background: #ccc url('/images/header_menubar_dropdown_button.png') no-repeat;
		background-size: 33px 33px;
		background-position: top 5px right 5px;
		height: 44px;
		width: 220px;		/*Set width of drop down*/

		padding-top: 5px;
		padding-right: 0px;
		padding-bottom: 5px;
		padding-left: 0px;
		
		border: solid 1px #aaa;
		border-radius: 5px;
		box-shadow: 0 1px 2px rgba(0,0,0,.3);
	}
	.nav_my_menu li {
		display: none;
		margin: 0;
		
		/*Ensure its above other screen elements below the menu*/
		position: relative;
		z-index: 1000;
	}
	.nav_my_menu .my_menu_button {
		display: block;
	}
	.nav_my_menu .my_menu_button a {
		display: block;
		background: none;
		color: #666;
		padding-right: 42px;		/*Clear the drop down icon */
	}
	.nav_my_menu a {
		display: block;
		padding: 5px 5px 5px 32px;
		text-align: right;		/*Set alignment*/
	}

	/* on nav hover */
	.nav_my_menu ul:hover li.my_menu_item {
		display: block;
		background-color: #888;
		margin: 0px;

		border: solid 1px #aaa;		
		border-radius: 5px;
		box-shadow: 0 1px 2px rgba(0,0,0,.3);
	}
	.nav_my_menu.right ul {
		left: auto;					/*Set alignment*/
		right: 0;						/*Set alignment*/
	}
}