Cita:
Iniciado por Mikmoro 
Vamos por partes (dijo Jack el destripador).
Tu código css todavía se puede reducir:
Siempre buscando agrupar lo más posible.
En segundo lugar, el asunto de que no quedaran unos encima de otros fue intencionado, por eso te puse "a ver si te gusta", ya que por el estilo desenfadado e infantil del tipo de letra me parecía que quedaría mejor sin simetría, unos en los huecos de los otros más o menos.
¿Cómo estaba hecho para dos líneas? muy sencillo: al darle una ancho al ul y una separación a los li, sencillamente no caben en el ancho y deben saltar obligatoriamente a la siguiente línea los que no quepan. He estirado el margen hasta conseguir que saltaran 3 de ellos. Simple ¿no?
Y la última pregunta, añadiendo:
#buttons li a.activo:hover { background-position: center bottom;} debería funcionar.
Mikel.
Mike: ahora anduvo todo a la perfección, gracias por tu ayuda. La "última" consulta sería como puedo hacer (he intentado formas pero no me salieron en estas últimas horas) para hacer que exista texto (tipo hidden o debajo de las imágenes) del menu, para darle accesibilidad y alguna persona desactiva las imágenes. Es posible no?
Saludos y nuevamente
Gracias