Buenas a todos, mucho tiempo sin venir por aqui.
Bueno estoy haciendo mi web personal y he creado un menu horizontal, ahora bien quiero que cuando la web se presente en un dispositivo de 480px pase a vertical, y me estoy volviendo loco. Este es mi menu:
Código:
#menu ul {
margin-left:0;
margin-top:2.12765957446809%; /* 20 / 940 */
margin-bottom:2.12765957446809%; /* 20 / 940 */
padding-left:0;
background-color:#FAFAFA;
border:1px solid #F2F2F2;
color:#666666;
float:left;
width:100%;
text-transform:uppercase;
}
#menu ul li {
display:inline;
}
#menu ul li a {
padding:2.12765957446809%; /* 20 / 940 */
margin:0;
background-color:#FAFAFA;
color:#666666;
float:left;
text-decoration:none;
}
#menu ul li a:hover {
background-color:#7CDCD9;
color:#FFFFFF;
}
#menu .active a {
background-color:#7CDCD9;
color:#FFFFFF;
}
Este es el media query:
Código:
@media screen and (max-width: 480px) {
#menu ul li {
display:block;
float:none;
}
#menu ul li a {
}
}
¿que debo de hacer para corregirlo?
Gracias majos.
