Willy ahora si el ultimo empujon, ya casi se ve bien pero ya no pude seguir. Estuve cambiando algunos parametros, sobre todo el padding y me acerque a ponerlos bien, pero ya no se que cambiar porque si los aumento o disminuyo mas se pierde de nuevo el menu. ya se ve asi:
http://sichemsdachurch.org/test/
y me quedo asi:
Código css:
Ver original.menu{width:100%; text-align:center;}
.menu ul{list-style:none}
.menu ul li{display:inline; padding:5px 0;font-weight:bold;font-size:12px; font-family:Tahoma, Arial, "Headache";}
.menu a{padding:21px; color:#FFF; width:120px; text-decoration:none;background:url(../images/dot-normal.jpg) no-repeat 0px;font-weight:bold;font-size:12px; font-family:Tahoma, Arial, "Headache";}
.menu a:hover,.menu a:focus,.menu a:active{padding:20px; color:#000; text-decoration:underline;background:url(../images/dot-over.jpg) no-repeat 0;}
lo que pasa es que no entiendo donde le das la medida de separacion entre cada li. Porque aqui
padding:5px 0; es lo mas que aguanta sin mandar una imagen para arriba o montar un li sobre otro.