El tema es, que el problema lo tengo para pantallas pequeñas digamos. te pongo en CSS y el menu.
Te pongo el CSS completo del menu.
#menu_comp {
float: right;
}
#menu_resp {
float: left;
margin-top: 105px;
visibility: hidden;
}
#menu {
float: right;
padding-bottom: 30px;
margin-top: 107px;
z-index: 11111;
}
#menu ul li {
float: left;
list-style-type: none;
width: 80px;
height: 20px;
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
text-align: center;
}
#menu ul li a {
color: #000000;
text-decoration: none;
width: 80px;
height: 20px;
}
#menu ul li a:hover {
color: #66CCCC;
border-bottom: 1px solid #66CCCC;
width: 80px;
height: 20px;
text-align: center;
padding-bottom: 10px;
}
@media screen and (min-width:553px) and (max-width:766px){
#menu_resp {
display: block;
text-align: center;
visibility: visible;
float: right;
}
#menu ul li {
margin-bottom: 5px;
background-color: #FFFFFF;
width: 50%;
float: right;
}
#menu ul li a:hover {
border-width: 0px;
border-style: none;
}
#menu {
position: fixed;
top: 50px;
right: -400px;
width: 100%;
height: auto;
}
}
EL MENU:
<div id="menu_comp">
<div id="menu_resp"><a href="#"><img src="imagweb/menu.png" alt="" width="45" height="45" id="menu_btn"/></a></div>
<nav id="menu" class="desbloq">
<ul>
<li class="option"><a href="#serviciosclick" title="Servicios">Servicios</a></li>
<li class="option"><a href="#sobremiclick" title="Sobre mí">Sobre mí</a></li>
<li class="option"><a href="#portfolioclick" title="Portfolio">Portfolio</a></li>
<li class="option"><a href="#contactoclick" title="Contacto">Contacto</a></li>
</ul>
</nav>
</div>
Un millon de gracias