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.


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".


Here's you skill:


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


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.