I am battling to obtain a design like I place in this picture in CSS.

I am using wordpress, and my theme just adds a complete image to the peak, I must take full advantage of space.

http://antinovaordemmundial.com/test/header.png

I've already all of the buttons as single images (at this time I prefered not to to make use of sprites) and every image includes a light version, to exhibit "on-hover".

Thanks

Here's you skill:

Html:

<ul id="menu">
    <li id="menu1"><a href="#">&nbsp;</a></li>
    <li id="menu2"><a href="#">&nbsp;</a></li>
</ul>

Css:

ul#menu a {
    text-decoration: none;
    display: inline-block;
    height: 50px;
    width: 200px;
    border: 1px solid black;
}

ul#menu li#menu1 a {
    background: url('someimage');
}

ul#menu li#menu1 a:hover {
    background: url('hover_image');
}

ul#menu li {
    display: inline;
}

Can't guarantee it employed in every browser though.