Итак, мы нарисовали наши кнопки, теперь осталось для них прописать HTML и CSS коды. По старой доброй традиции начнём с HTML:
Code
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Меню сайта</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div align="center" id="container">
<div id="menu">
<!-- Старт меню -->
<ul class="navigation">
<li id="m1"><a href="/" title="Ваш текст описания"></a></li> <!-- 1 пункт меню -->
<li id="m2"><a href="/forum/" title="Ваш текст описания"></a></li> <!-- 2 пункт меню -->
<li id="m3"><a href="/gb/" title="Ваш текст описания"></a></li> <!-- 3 пункт меню -->
<li id="m4"><a href="/index/0-3/" title="Ваш текст описания"></a></li> <!-- 4 пункт меню -->
</ul>
<!-- /Старт меню -->
</div>
</div>
</body>
</html>
div с id "container" служит для позиционирования меню на странице: в данном случае мы задаём для меню положение по центру.
div "menu" нужен для придания стиля меню: путь к фоновой картинке меню, его высота и т.д.
Теперь перейдём к таблице стилей:
Code
body {
background: #000000;
font-family: Verdana;
font-size: 11px;
}
#container {
}
/* стиль меню */
#menu {
background: url('menu.png'); /* путь к фоновой картинке меню */
height: 27px; /* высота меню. Фоновое изображение должно быть больше этого значения в два раза! (см. урок для ФШ)*/
width: 500px; /* ширина меню, равняется ширине фоновой картинки */
}
.navigation {
margin: 0 0 0 15px; /* отступ начала меню от левого края */
padding: 0;
}
.navigation li {
float: left; /* выравнивает элемент по левому краю, а все остальные элементы обтекают справа, чтобы получить эффект горизонтального расположения пунктов меню. */
list-style-type: none; /* убираем маркеры для списка */
}
.navigation li a {
display: block; /* отображает данный элемент как блок*/
height: 27px; /* высота пункта меню */
width: 117px; /* ширина одного пункта меню */
}
#m1 a:hover {
background: url('menu.png') -15px 27px; /* цвет фона активного меню, смещение по горизонтали и вертикали */
}
#m2 a:hover {
background: url('menu.png') -132px 27px; /* цвет фона активного меню, смещение по горизонтали и вертикали */
}
#m3 a:hover {
background: url('menu.png') -249px 27px; /* цвет фона активного меню, смещение по горизонтали и вертикали */
}
#m4 a:hover {
background: url('menu.png') -366px 27px; /* цвет фона активного меню, смещение по горизонтали и вертикали */
}
Если всё сделано правильно, то нас должен ждать примерно такой результат.
То есть, что есть какой тег и что он даёт, ещё неплохо было бы отмечать каким-то способом (например, цветом), какой тег обязателен, какой - нет. 
