Hola!
Mira, aquí te dejo el code de como podrías hacerlo y las imágenes en un hosting gratis llamado
JackImages.tk (muy recomendado!)
El CSS sería el siguente:
Código CSS:
Ver originalbody{
background-color:#f2f2f2;
margin: 0px;
padding:0px;
}
/* Aquí empieza el menú a crearse, primero ponemos la imagen de fondo y la medida de altura (height) */
.menu{
background-image:url(http://jackimages.tk/file/menu.png);
background-repeat:repeat-x;
height:35px;
text-align:center;
margin-top:0px;
}
/* Nos sirve para centrar y modificar el tamaño máximo de nuestro menú (width:800px) */
.menu-size{width:800px; margin: 0 auto;}
/* Los botones, aplicamos un fondo y un color y padding para centrar verticalmente nuestro texto */
.boton{
height:30px;
color:#FFF;
padding-top:7px;
padding-bottom:-10px;
}
/* Repetimos el proceso con :hover que será cuando tengamos el cursor encima del div */
.boton:hover{
background-image:url(http://jackimages.tk/file/menu.png);
background-repeat:repeat-x;
background-position:0 -35px;
height:28px;
color:#FFF;
padding-top:7px;
padding-bottom:-10px;
}
/* Importante, si no ponemos esta línea se creará un espacio entre el top y nuestro menú */
ul{margin:0;}
/* Alineacion hacia la derecha con float:left, quitamos los puntos blancos con list-style:none y centramos el texto con align */
ul li{
float:left;
width:50px;
padding-left:5px;
padding-right:5px;
text-align:center;
list-style:none;
}
/* Para hacer más bonita la web, ponemos un degradado de 155px de alto con repeticion en x */
.fondo{
background-repeat:repeat-x;
background-image:url(http://jackimages.tk/file/top.png);
height:155px;
}
Y su HTML sería así: