Продолжение данного урока Подразумевает наличие у Вас изображений, необходимых для создания этого меню (header.jpg, back.jpg и hover.jpg). По умолчанию картинки хранятся в той же директории, что и файлы с HTML и CSS.
01. По старой и доброй традиции создадим файлы index.html и style.css - для этого откроем блокнот в Windows, и впишем туда следующие строчки:
для index.html :
Code
<html>
<head>
<title>Меню сайта</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div align="center"><!-- задаём размещение по центру -->
<div id="container">
<img src="header.jpg" alt="" border="0" height="214" width="990"> <!-- шапка сайта -->
<div id="menu">
<ul class="navigation"> <!-- меню сайта -->
<li id="m1"><a href="/" title="Ваш текст описания"></a></li>
<li id="m2"><a href="/" title="Ваш текст описания"></a></li>
<li id="m3"><a href="/" title="Ваш текст описания"></a></li>
<li id="m4"><a href="/" title="Ваш текст описания"></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Вместо "a href="/"" нужно вставить необходимые ссылки.
Переходим к таблице стилей (CSS). Добавляем в файл style.css следующие строчки:
Code
body {
background: #000000;
font-family: Verdana;
font-size: 11px;
}
#container {
width: 990px; /* ширина шапки и меню */
}
#menu {
background: url('back.jpg'); /* фон меню*/
height: 36px; /* высота меню */
}
.navigation {
margin: 0 0 0 255px; /* последнее значение - отступ меню от левого края */
padding: 0;
}
.navigation li {
float: left; /* выравнивает элемент по левому краю, а все остальные элементы обтекают справа. Необходимо для создания горизонтального меню */
list-style-type: none; /* убираем маркеры для списка.*/
}
.navigation li a {
display: block; /* отображает данный элемент как блок*/
height: 36px; /* высота блока */
width: 120px; /* ширина блока */
}
#m1 a:hover {
background: url('hover.jpg'); /* цвет фона активного меню */
}
#m2 a:hover {
background: url('hover.jpg') -120px 0px; /* цвет фона активного меню. -120 - количество пикселей, на которые будет смещена картинка hover.jpg - необходимо для вывода нужного фрагмента над соответствующим пунктом меню. Рассчитывается по ширине navigation li a (в данном случае width=120 пикселей, для следующего пункта -240, и т.д.) */
}
#m3 a:hover {
background: url('hover.jpg') -240px 0px;
}
#m4 a:hover {
background: url('hover.jpg') -360px 0px;
}
В результате получаем работоспособное и простое меню 
© otherside.ws
