Уровень: Легкий
Шагов: 2 01. Перво наперво создадим HTML документ (назовём его index.html), в котором мы будем тренироваться - для этого откроем стандартный блокнот в MS Windows, и впишем туда следующие строчки:
Code
<html>
<head>
<title>Меню сайта</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Наша рабочая область -->
</body>
</html>
Теперь добавим наше меню (Естественно, что все названия и количество пунктов вы можете менять на своё усмотрение). Используем стандартный набор тегов <ul> и <li>
Code
<html>
<head>
<title>Меню сайта</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Меню сайта -->
<div id="container">
<ul class="navigation">
<li><a href="/" title="Ваш текст описания">ссылка №1</a></li>
<li><a href="/" title="Ваш текст описания">ссылка №2</a></li>
<li><a href="/" title="Ваш текст описания">ссылка №3</a></li>
<li><a href="/" title="Ваш текст описания">ссылка №4</a></li>
<li><a href="/" title="Ваш текст описания">ссылка №5</a></li>
<li><a href="/" title="Ваш текст описания">ссылка №6</a></li>
</ul>
</div>
</body>
</html>
У нас есть меню, но выглядит оно стандартно и скучно. Теперь пришло время заняться таблицей стилей
02. Создадим, с помощью блокнота, файлик style.css - это будет наша рабочая таблица стилей. Сохранить её нужно в той же папке, что и index.html . Для начала добавим параметры для "тела" нашей стрпницы
Code
body {
background: #f0f0f0;
font-family: Verdana;
font-size: 11px;
}
Здесь мы задаём цвет фона страницы, её основной шрифт и его размер. Теперь добавим параметры непосредственно меню:
Code
#container {
margin-top: 30px; /* отступ от верхнего края */
}
.navigation li {
float: left; /* выравнивает элемент по левому краю, а все остальные элементы обтекают справа. Необходимо для создания горизонтального меню */
list-style-type: none; /* убираем маркеры для списка.*/
padding: 3px; /* отступы между блоками меню */
}
Теперь наше меню стало горизонтальным (благодаря параметру float: left;). Пришло время следующего шага:
Code
.navigation li a {
background: #dfdfdf; /* цвет фона неактивного меню */
border: 1px solid #afafaf; /* цвет и размер рамки */
color: #7f7f7f; /* цвет букв */
display: block; /* отображает данный элемент как блок*/
height: 40px; /* высота блока */
line-height: 40px; /* параметры height и line-height , желательно, должны быть одинаковыми - так текст будет точно отцентрирован по вертикали */
text-align: center; /* выравнивание по горизонтали */
width: 150px; /* ширина блока */
}
теперь осталось только добавить последний штрих - поведение блока при наведении на него мышкой:
Code
.navigation li a:hover {
background: #ffffff; /* цвет фона активного меню */
}
всё, меню готово. Можно вместо цвета использовать фоновые изображения ( background: url('ссылка к картинке'); ), да и вообще менять всё под свои вкусы и желания 
Пример данного меню Вы можете скачать с нашего каталога файлов
Опять же спасибо, Reddy.
