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

Это очень красивое черное горизонтальное меню, которое подойдет для сайта любого цвета и любой тематики. Основное преимущество, наверняка, заключается в том, что данное меню сделано в стиле WEB 2.0, и выделенные пункты в меню округленные. Такое горизонтальное меню не сложно установить на сайт: достаточно скопировать код стиля в свой CSS, а потом вставить на странице код самого меню с ссылками. К выделенному пункту применяется специальный класс, т.е. Вы можете показать пользователю его текущее местонахождения на сайте, а точнее рубрику, в которой находится пользователь.

Пример



Код CSS

<style type="text/css"> .menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(//yraaa.ru/_pu/6/35136527.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;} .menu1 li {float:left;} .menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;} .menu1 li a b {float:left; display:block; padding:0 16px 0 8px;} .menu1 li.current a {color:#fff; background:url(//yraaa.ru/_pu/6/66441186.gif);} .menu1 li.current a b {background:url(//yraaa.ru/_pu/6/66441186.gif) no-repeat right top;} .menu1 li a:hover {color:#fff; background:#000 url(//yraaa.ru/_pu/6/50195982.gif);} .menu1 li a:hover b {background:url(//yraaa.ru/_pu/6/50195982.gif) no-repeat right top;} .menu1 li.current a:hover {color:#fff; background:#000 url(//yraaa.ru/_pu/6/66441186.gif); cursor:default;} .menu1 li.current a:hover b {background:url(//yraaa.ru/_pu/6/66441186.gif) no-repeat right top;} </style>

Код HTML

<ul class="menu1"> <li><a href="//yraaa.ru/"><b>Главная</b></a></li> <li class="current"><a href="//yraaa.ru/"><b>Обратная связь</b></a></li> <li><a href="//yraaa.ru/"><b>Блог</b></a></li> <li><a href="//yraaa.ru/"><b>О нас</b></a></li> </ul>