Горизонтальное меню на CSS с применением изображений

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Достаточно простое, но функциональное меню на CSS с применением изображений. При наведении курсора мыши на отдельную ссылку меню, она изменяет цвет шрифта и оказывается в своеобразном цветовом поле.

Установка на сайт

1. Скачайте архив с материалом, распакуйте в текущую папку на компьютере и проверьте работу меню, открыв в браузере файл demo.html. Если всё в порядке, загрузите файлы изображений в соответствующую папку сайта и расставьте коды.

2. Код в таблице внизу вставить в раздел head или файл стилей сайта:

<style type="text/css">
#menu li 
{
list-style-type: none;
display: inline;
}
#menu li a 
{
padding: 0 18px 0 0;
position: relative;
display: block;
float: left;
color: #000;
height: 39px;
font-family: arial;
text-transform: uppercase;
font-size: 14px;
margin: 0 5px 0 5px;
}
#menu li  b 
{
display: block;
height: 39px;
float: left;
padding: 10px 0 0 25px;
cursor: pointer;
font-weight: normal;
}
#menu li a:hover,
#menu li a:active,
#menu li a:focus
{
background-position: right 0px;
padding: 0 18px 0 0;
color: #fff;
background-image: url(img/menu_active_r.jpg);
text-decoration: none;
background-repeat: no-repeat;
}
#menu li a:hover b,
#menu li a:active b,
#menu li a:focus b
{
background-position: left 0px;
background-image: url(img/menu_active_left.jpg);
background-repeat: no-repeat;
}
</style>

3. А этот код скопируйте и расположите в том месте, где желаете видеть меню и заполните своими данными:

<div id="menu">
<ul>
<li><a href="#"><b>Главная</b></a></li>
<li><a href="#"><b>Название</b></a></li>
<li><a href="#"><b>Название</b></a></li>
<li><a href="#"><b>Название</b></a></li>
<li><a href="#"><b>Название</b></a></li>
<li><a href="#"><b>Название</b></a></li>
<li><a href="#"><b>Контакты</b></a></li>
<li><a href="#"><b>FAQ</b></a></li>
</ul>
</div>

Меню очень простенькое, но может быть, кому-то понравится. Настройки можно менять в CSS.  Это всё. С уважением к вашему вниманию, L.M.