Симпатичное вертикальное меню с выделением пунктов при наведении мыши

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

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

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

<style type="text/css">

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	font-weight: bold;
	background: #FFF;
	}

h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	margin: 0;
	padding: 0;
	}

hr {
	border: none;
	border-top: 1px solid #CCCCCC;
	height: 1px;
	margin-bottom: 25px;
	}


ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

img {
	border: none;
	}
	
#menu {
	width: 200px;
	margin: 0 auto;
	border-style: solid solid none solid;
	border-color: #D8D5D1;
	border-size: 1px;
	border-width: 1px;
	}
	
#menu li a {
	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 24px;
	text-decoration: none;
	}	
	
#menu li a:link, #menu li a:visited {
	color: #3688BA;
	display: block;
	background:  url(img/menu.gif);
	padding: 8px 0 0 30px;
	}
	
#menu li a:hover {
	color: #3688BA;
	background:  url(img/menu.gif) 0 -32px;
	padding: 8px 0 0 32px;
	}
</style>

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

<div id="menu">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Шаблоны</a></li>
    <li><a href="#">Дизайн</a></li>
    <li><a href="#">HTML уроки</a></li>
    <li><a href="#">CSS уроки</a></li>
    <li><a href="#">Обратная связь</a></li>
  </ul>
</div>

Используемое изображение:

Сохраните это изображение в папку img, которая должна находиться в одной директории с файлом, в котором расположено меню.

Впишите свои URL и названия ссылок.

Спасибо за внимание. Всего Вам доброго! Посещайте мой сайт. Пока! L.M.