Стильное темное горизонтальное меню

Меню в примере растягивается по ширине элемента-родителя. Оно растягивает по ширине окна. Использовать такой дизайн меню следует именно для основной панели навигации, она может стать главной фишкой сайта. Стильное темное горизонтальное меню, по моему мнению, больше всего подойдет для сайта визитки. Такое мнение вытекает из-за больших пунктов. Для сайта, на котором в меню должно быть около не более шести пунктов горизонтальное меню подойдет изумительно.

Пример



Код CSS

<style type="text/css"> #menu{ width:100%; height:61px; background:url(//yraaa.ru/_pu/8/42775777.jpg) repeat-x; } #menu ul{ width:80%; margin:0 auto; list-style:none; } #menu li{ list-style:none; display:block; float:left; font-size:11px; font-weight:bold; height:61px; line-height:61px; margin:0 5px; } #menu li a{ display:block; float:left; height:61px; color:#99a2b7; text-decoration:none; text-transform:uppercase; padding:0 20px; } #menu li a:hover{ background:url(//yraaa.ru/_pu/8/35581243.jpg) repeat-x; color:#fff; } #menu li a:hover span, #menu li .current span{ background:url(//yraaa.ru/_pu/8/61167127.jpg) no-repeat top; height:61px; display:block; float:left; } #menu li .current{ display:block; float:left; height:61px; background:url(//yraaa.ru/_pu/8/35581243.jpg) repeat-x; color:#fff; text-decoration:none; text-transform:uppercase; padding:0 20px; } </style>

Код HTML

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

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