Горизонтальное меню в стиле WEB 2.0

Оригинальное горизонтально меню, в котором используются три изображения. Правда, одно изображение, я считаю, лишнее. Т.е. здесь две картинки очень похожи, можно было бы использовать одну. Горизонтальное меню в стиле WEB 2.0 подойдет для персонального блога, для сайта визитки, например, банковской компании. В своем стандартном виде оно применимо для сайта с белым фоном, в другом случае его следует адаптировать.

Пример



Код CSS

<style type="text/css"> #menu{ /* margin:0 auto;*/ width:700px; height:59px; background:url(//yraaa.ru/_pu/8/33966158.jpg) repeat-x; } #menu ul{ list-style:none; margin:0 auto; width:500px; } #menu li{ list-style:none; display:block; float:left; height:59px; line-height:59px; } #menu li a{ display:block; float:left; color:#a7a7a7; text-transform:uppercase; font-size:11px; font-weight:bold; line-height:59px; text-decoration:none; padding:0 20px; } #menu li a:hover{ color:#fff; background:url(//yraaa.ru/_pu/8/43404672.jpg) no-repeat bottom; } #menu li a.current{ display:block; float:left; background:url(//yraaa.ru/_pu/8/43404672.jpg) no-repeat bottom; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold; line-height:59px; text-decoration:none; padding:0 20px; } #menu li a:hover.current{ color:#fff; background:url(//yraaa.ru/_pu/8/22364790.jpg) no-repeat bottom; } </style>

Код HTML

<div id="menu"> <ul> <li><a href="#" class="current">Главная</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Статьи</a></li> <li><a href="#">Контакты</a></li> </ul> </div>

Используемые цвета: яблочно зеленый, черный.

Нужные изображения смотрите ниже.