Hola, como poner menu de imagenes de manera vertical?

Con float-left no se acomodan las imagenes en linea uno tras otro, sino mas bien uno debajo de otro, aqui esta el codigo CSS:


.iconos-sociales
{
list-style:none;
float:right;
width:170px;
}

/* POR ULTIMO PONERLOS EN LINEA */
.iconos-sociales li {
float-left;
}
/* con float-left de arriba si tiene espacio se pone a un lado
sino se pone abajo */

.iconos-sociales a
{
display:block;
background:url(../images/icos.png);
height:50px;
}

/* Crear sprite CSS de los iconos sociales */

.facebook a{
width:47px;
background-position: 0 0px;
}
.twitter a{
width:47px;
background-position: -60px 0;
}
.google a{
width:47px;
background-position: -122px 0;
}

/* --------------------------------------- */
.facebook a:hover{
width:47px;
background-position: 0 -50px;
}
.twitter a:hover{
width:47px;
background-position: -60px -50px;
}
.google a:hover{
width:45px;
background-position: -122px -50px;
}

Como bien dice el comentario en tu codigo, si tiene espacio se pone a un lado, sino se ubica abajo. Es lógica. Te va a pasar lo mismo si usas Display:inline-block, si tienen espacio se colocan uno al lado del otro, si no hay espacio se acomodan debajo.

Gracias, ya hice mas pequeña la imagen, la reduje 2 veces y todavia nada, quisiera saber si existe otra manera en que pueda hacerse.

Era una bobada, puse guión en vez de dos puntos en el código. Gracias de todas maneras.