Menu responsivo, pasar de horizontal a vertical

[MindPaniC]

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.

[Bandit]

Hola MindPaniC:
Pero con tu código si sucede que al achicar el navegador los botones se ponen en forma vertical, no veo el problema.

Espero haberte sido de ayuda.

[MindPaniC]

Bueno he conseguido ponerlo vertical, pero no consigo que cada bloque del menu se adapte al 100% del espacio, ademas tengo que darle un margen inferior a cada bloque para que no se amontonen. aqui se puede ver en funcionamiento: http://pruebas.loslocostambientienenblog.com/

Menu:

Código CSS:

#menu ul {
    margin-left:0;
    margin-top:2.12765957446809%; /* 20 / 940 */
    margin-bottom:2.12765957446809%; /* 20 / 940 */
    padding-left:0;
    padding-top:2.12765957446809%; /* 20 / 940 */
    padding-bottom:2.12765957446809%; /* 20 / 940 */
    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-right:0;
    background-color:#FAFAFA;
    color:#666666;
    float:none;
    text-decoration:none;
}
#menu ul li a:hover {
    background-color:#7CDCD9;
    color:#FFFFFF;
}
#menu .active a {
    background-color:#7CDCD9;
    color:#FFFFFF;
}
 

MEDIA QUERY:

Código CSS:

@media screen and (max-width: 480px) {
    #menu ul li {
        display:block;
        float:none;
        margin-bottom:10px;
        list-style:none;
    }
    #menu ul li a {
    }
}
 

Cómo soluciono esas pequeñas deficiencias??

saludos

[pzin]

Puedes poner los elementos A como elementos en bloque para que no te pase eso de que se amontonen unos encima de otros.

[MindPaniC]

Iniciado por Bonez

Puedes poner los elementos A como elementos en bloque para que no te pase eso de que se amontonen unos encima de otros.

Muchas gracias al final lo he conseguido!!!

Aquí lo podeis ver funcionando: http://pruebas.loslocostambientienenblog.com/

Ahora solo me falta un pequeño detalle, no se a que se debe pero no encaja al 100% en el movil, hay un trozo a la derecha de aprox 20px que no encaja en pantalla y hay que desplazarse. Si reducir la pantalla del navegador lo podeis comprobar. ¿a que se debe?

Saludos

[MindPaniC]

Solucionado, ahora ya encaja perfecto en mi movil. A seguir trabajando...

Gracias a todos!!! saludos

[cecaceresp]

Hola!! He copiado tu codigo pero tengo problemas pues no encaja en el movil. ¿Cómo lo hiciste?

Gracias!