How to use CSS to get 5 buttons aligned like this

I'm struggling to get a design like I put in this image in CSS.

I'm using wordpress, and my theme just adds a full image to the top, I would like to make the most of space.

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

I have already all the buttons as single images (at this point I prefered to not to use sprites) and each image has a light version, to show "on-hove开发者_运维技巧r".

Thanks

Here's what you can do:

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 working in every browser though.