<style>
#menu_container
{
max-width:700px;
margin: 0 auto;
padding:0px;
overflow:hidden;
}

/* New Menu */
li
{
margin-left:0px;
}

ul
{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #eee;
}

ul .btn
{
text-align:right;
display: none;
cursor: pointer;
}

ul li
{
float: left;
}

ul li a
{
display: block;
padding: 10px;
border-right: 1px dotted #000;
text-decoration: none;
color: #000;
}

li:hover
{
background:#ccc;
}

ul li a:hover
{
color: #fff;
}


@media (max-width:700px) {

ul li
{
float:none;
}

ul .btn
{
border-right:0px;
display: block;
}

ul .menu li a
{
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
border-right:0px;
border-bottom: 1px dotted #fff;
}

ul .menu
{
display: none;
}

ul li:hover .menu
{
display: block;
}
</style>

<div id="menu_container">
<ul class="nav">
<li>
<a class="btn">
<img src="3lines.png">
</a>
<ul class="menu">
<li>
<a href="http://www.google.com">
Link 1</a>
</li>
<li>
<a href="http://www.mycomputertips.co.uk">
Link 2</a>
</li>
<li>
<a href="http://www.codeweavers.com">
Link 3</a>
</li>
</ul>
</li>
</ul>
</div>