Como puedo hacer que mi menu sea responsivo correctamente

Hola belen89

No es perfecto, pero para comenzar está perfecto.
La otra opción es boostrap pero ahí te fallo por ser muy novato.
Código:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>by chatiel</title>

<script type='text/javascript' src='whatsapp-contact.js'></script>

<style>
/* Clearfix */
.clear:before, .clear:after {
    content: " ";
    display: table;
}

.clear:after {
    clear: both;
}

.clear {
    *zoom: 1;
}

a#pull {
    display: none;
}
nav {
    height: 40px;
    width: 100%;
    background: #666;
    position: relative;
    border-bottom: solid 1px #DDD;
}

nav ul {
    padding: 0;
    margin: 0 auto;
    width: 600px;
    height: 40px;
}

nav li {
    display: inline;
    float: left;
}

nav a {
    color: #FFF;
    display: inline-block;
    width: 100px;
    text-align: center;
    line-height: 40px;
}

nav li a {
    border-right: 1px solid #576979;
	text-decoration:none;
}

nav li:last-child a {
    border-right: 0;
}

nav a:hover, nav a:active {
    background-color: #333;
}
@media only screen and (max-width : 500px) {
    nav {
        border-bottom: 0;
        height: auto;
    }

    nav ul {
        display: none;
        height: auto;
        width: 100%;
    }

    nav li {
        width: 50%;
        float: left;
        position: relative;
    }

    nav a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }

    nav a#pull {
        display: block;
        background-color: #666;
        width: 100%;
        position: relative;
    }

    nav a#pull:after {
        content:"";
        background: url('nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}
#panel {
  display: none;
}
.submenu{
	width:100px;
	height:150px;
	background-color:#000;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function() {
    var pull = $('#pull');
    menu = $('nav ul');
    menuHeight = menu.height();

    $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });
});

$(window).resize(function(){
    var w = $(window).width();
    if(w > 320 && menu.is(':hidden')) {
        menu.removeAttr('style');
    }
});
</script>
</head>

<body>
<script>
function Mostrar() {
  document.getElementById("panel").style.display = "block";
}
</script>
<script>
function Ocultar() {
  document.getElementById("panel").style.display = "none";
}
</script>
<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="#">Descargar</a></li>
        <li><a href="#">Códigos</a></li>
        <li><a href="/shop/">SHOP</a></li>
        <li><a href="#" onmouseover="Mostrar()">Mi Cuenta</a>
			<ul id="panel" class="submenu" onmouseout="Ocultar()">
				<li><a href="#" onmouseover="Mostrar()">Editar datos</a></li>
				<li><a href="#" onmouseover="Mostrar()">Editar datos</a></li>
				<li><a href="#" onmouseover="Mostrar()">Editar datos</a></li>
			</ul>
		</li>
		<br clear="all" />
    </ul>
    <a id="pull" href="#">Menu</a>
</nav>


</body>
</html>
con un poco de CCS3 quedará genial.

Espero que te sirva.