Горизонтальное меню

[Whatsup]

Подскажите пожалуйста как сделать такое вот меню.

Я делаю следущее

<div align="left" style=" width: 900px; 
 height: 40px;border: 2px solid; border-color:ffffff;">  Тут задаю размеры блока на котором оно будет.

<a 
href=" "class="rollover1" > </a> 

  <a 

href=" " class="rollover2" ></a>

	<a 

href=" "class="rollover3"></a>

	<a 

href=" "class="rollover4"></a>

	<a 
href=" "class="rollover5"></a>

Тут идет перечисление граф в меню,Хотелось бы сделать меню как то по проще,дело в том что при этом коде каждый следущий рисунок меню становится вертикально и получается столбик.Который потом очень неудобно позиционировать горизонтально,нужно каждому классу Rollover присваивать позицию relativ и двигать в ручную каждую картинку.

вот rollover

a.rollover1 {
 background: url('http://whatsup.ucoz.ru/_ph/1/2/355840115.png'); 
 display:block;  Когда убираю это вообше все пропадает
 width: 132px; 
 height: 36px;
 border: 0px; 
position:  relative;  А так позиционировать очень не удобно.Меню хоть и из 5 кнопочек но при изменении оригинала страницы приходится все двигать в ручную. Причем следущие нужно двигать вверх и вправо.
right: -5px;

}


a.rollover1:hover {
 background: url('http://whatsup.ucoz.ru/_ph/1/2/396248563.png'); border: 0px; }

Другой вариант,

<div align="left" style="border: 2px solid; border-color:221919;">

<a 
href=" " > <img style="margin-left: 40px;"
src=""  ></a> 

  <a 

href=" " ><img style="margin-left: 40px;"
src=""  ></a>

</div>

В таком случае у меня все прекрасно получается.Все рисунки меню выстраиваются по горизонтали очень хорошо,Но тогда у меня не получается присвоить псевдо класс что при наведении картинка менялась. То есть как бы нажатие кнопки происходило при наведении.

фуф вроде бы понятно рассказал.

Я недавно в css помогите пожалуйста.