Как использовать CSS, чтобы выровнять 5 кнопок вот так

Question

Я изо всех сил пытаюсь получить дизайн, подобный этому изображению в CSS.

Я использую WordPress, и моя тема просто добавляет полное изображение вверху, я хотел бы максимально использовать пространство.

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

У меня уже есть все кнопки как отдельные изображения (на данный момент я предпочел не использовать спрайты), и у каждого изображения есть облегченная версия, чтобы показывать «при наведении».

Спасибо

Answer 1

Вот что вы можете сделать:

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;
}

Не могу гарантировать, что он работает в любом браузере.