Menu em CSS com imagem e efeito hover

Pessoal,

Fiz um exemplo para demonstrar o que eu preciso, alguém pode me ajudar?

/applications/core/interface/imageproxy/imageproxy.php?img=http://s11.postimg.org/54q7ewymb/exemplomenu.png&key=94064cc8f892c4d89452f012e8c3cfc7941cf7ca4086a504cb5e7552e60c54d5" alt="exemplomenu.png" />

Tentei adaptar o menu do MAUJOR mas não deu certo.

http://www.maujor.com/tutorial/apoio_barrabotao/passo5.html

No exemplo todos os botões tem a mesma largura, mas no final cada um vai ter um tamanho.

Alguém pode me ajudar?

Obrigado