This is simple css horisontal menu. You don’t need be an advanced webmaster for create the same nice menu.
Lets start:
1. we should draw this menu in photoshop ( I created this one for example)

2.now lets create a rollover effect for our menu. Look what i did  I made a copy of this menu   and just changed a color of button. Next i paste together  both images like this :

3.lets cut this menu on buttons look like i did this:

4.now lets write little css code :

a.valutesbfunt {
display:block;
height:45px;
width:49px;
background :url(images/css_horizontal_menu/css_menu_button1.jpg);
text-decoration: none;

}
a.valutesbfunt:hover  {
background-position: 0 -45px ;
}

.deltextatall {
position: absolute;
left: -5000px;
}

let me exlain what i did in this css :

i created a block  height: 45px on  width:49px and background image of my block is an imge

size of this image is width:49px height:90px this is really important i mean this size 90px i show in this block just top part of this background image height: 45px on  width:49px so people can’t see bottom side of it with another color
what i do next if you put your mous on this block  i will show you another bottom part of this button  background-position: 0 -45px ; this mean that i changed button position and show you just bottom part with gray button
for show this button i need a text   in it so i decide hide it  and position of this text is  left: -5000px; so you can’t see it .
5.next step create the same css for all buttons just with different  names

a.valutesbfunt {
display:block;
height:45px;
width:49px;
background :url(images/css_horizontal_menu/css_menu_button1.jpg);
text-decoration: none;

}
a.valutesbfunt:hover  {
background-position: 0 -45px ;
}

.deltextatall {
position: absolute;
left: -5000px;
}
a.valutesdollar {
display:block;
height:45px;
width:46px;
background :url(images/css_horizontal_menu/css_menu_button2.jpg);
text-decoration: none;

}
a.valutesdollar:hover  {
background-position: 0 -45px ;
}
a.valuteseuro {
display:block;
height:45px;
width:55px;
background :url(images/css_horizontal_menu/css_menu_button3.jpg);
text-decoration: none;

}
a.valuteseuro:hover  {
background-position: 0 -45px ;
}

6. step lets create simpe html code for one of this buttons  :

<a href=”#” class=”valutesbfunt”  title=”Pound”><span class=”deltextatall”>Pound</span></a>

link in hreaf=”#”  you  can chage on any link as you  need the same you can do  with title and anchor text of the link

7. lets create whole menuin html

<table width=”150″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td align=”left” valign=”top”  ><a href=”#” class=”valutesbfunt”  title=”Pound”><span class=”deltextatall”>Pound</span></a> </td>
<td align=”left” valign=”top”><a href=”#” class=”valutesdollar”  title=”Dollar”><span class=”deltextatall”>Dollar</span></a></td>
<td align=”left” valign=”top”><a href=”#” class=”valuteseuro”  title=”Euro”><span class=”deltextatall”>Euro</span></a></td>
</tr>
</table>

just notice that each button has her own class  in  link “valutesbfunt,valutesdollar,valuteseuro” in span class is the same  for all css menu buttons  “deltextatall”

lets see what we have now
examle