Hola!
Primero especifico esto: Cuando se crea un menú con submenus, se usa <ul><li>, funciona de la siguiente manera, crea un árbol <ul> indica el comienzo, luego dentro con li marca una rama del árbol y si dentro de <li> pones <ul> crearas otra sub-rama en el arbol. Todo ello indicado con unos puntos a la izquierda de cada rama.
Donde dice
ul li{
float:left; « Eso hace que se ordenen hacia la derecha en horizontal
width:50px; « Medida de cada uno (medida mínima)
padding-left:5px; « Separación entre el div del contenido
padding-right:5px; « Lo mismo pero a la derecha
text-align:center; « Texto centrado
list-style:none; « Quitar el circulito blanco que aparece si hacer un <ul><li>
}
La repeticion z significa que la imagen solo se repite en horizontal (repeat-y para vertical), que es lo que nos interesa para el fondo de nuestro menú
Por si te lo preguntas tambien, en boton:hover aparece la siguiente línea
.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;
}
Si miras la imágen de menú verás que aparece arriba el color del menú y abajo aparece el del menú pulsado. Con este código lo que conseguimos es que la imagen de ese div empiece a partir del pixel 0 (derecha) y del -35 (arriba). Con -35 hacemos que la imagen suba, y conseguimos el efecto de que la imágen comienza desde el px 35, el color del botón pulsado.
Espero que se entienda, nos vemos Saludos y suerte con el code!