Vamos por partes (dijo Jack el destripador).
Tu código css todavía se puede reducir:
Cita: #buttons li a {display:block;
background-repeat: no-repeat;
background-position:center top;
}
#buttons li a.historia {
background: url('historia.jpg');
height:28px;
width:98px;
}
#buttons li a.contacto {
background: url('contacto.jpg');
height:28px;
width:105px;
}
#buttons li a.recursos {
background: url('recursos.jpg') ;
height:28px;
width:108px;
}
#buttons li a.links {
background: url('links.jpg') ;
height:28px;
width:55px;
}
#buttons li a.galeria {
background: url('galeria.jpg');
height:48px;
width:87px;
}
#buttons li a.home {
background: url('home.jpg');
height:28px;
width:62px;
}
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.