Этот код помещается в каскадную таблицу стилей (CSS). Если Вы еще не в курсе, что это такое, прочитайте книгу «Блочная Верстка» из содержания которой почерпнете массу полезной информации.

Вернемся к меню для сайта и его коду.
#nav {
width: 990px;

/*ширина всего меню навигации */
height: 50px;

/*и, разумеется, его высота*/
background: url(img/nav.jpg) no-repeat #374f37;

/*тут мы задаем параметры фона; сразу прописываем путь к картинке, котороая будет служить фоном, после указываем, что эта картинка не повторяется и в конце указываем цвет меню, на случай, если пользователь отключит графику*/
font-size: 18px;

/*размер шрифта */
float:left;

/*делает так, что наш блок с меню располагается справа; на самом деле меню растягивается на всю длину сайта и нам это вроде не нужно, но этот параметр понадобятся, чтобы не «косячил» макет, чтобы меню «дружило» с остальными блоками */
}
#nav ul {
margin:4px 0 0 25px;

/*меняя эти параметры, я «двигаю» кнопки относительно фона */
list-style:none;

/*меню создается в виде списка, а команда «none» указывает на то, что у строк этого списка не будет указателе в виде цифр или маркеров; чтобы лучше уяснить, что я имею ввиду, удалите эту строку, когда будете делать свое меню для сайта и увидите, что из этого получится; когда посмотрите – вернете строку на место*/
}
#nav li {
display:inline;

/*чтобы наши кнопки выстраивались в линию, а не столбцом */
}
#nav a {
float:left;

/*указывает, что кнопки должны выстраиваться слева направо */
display:block;

/*этот параметр нам нужен, чтобы у нас была не просто ссылка, а ссылка с «каркасом», который и будет создавать иллюзию кнопки */
width: 98px;

/*длина этого «каркаса» */
height: 50px;

/*и… правильно! */
background:url(»img/key.png») no-repeat;

/*тут все, как и в случае с фоном для меню; кто не уяснил, пускай вернется чуть выше и повторит */
text-align : center;

/*положение текста внутри «каркаса» */
text-decoration: none;

/*делаем, чтобы текст был чистый, без всяких подчеркиваний, которые в меню навигации нам не нужны совершенно*/
padding:10px 2px 10px 0px;

/*этими циферками можно подправить положение надписи внутри «каркаса», если нас что-то не устраивает: подвинуть, опустить и т.д. */
color:#FFF;

/*цвет надписи, когда кнопка не активна */
}
#nav a:hover {
background-position:0% -50px;

/*здесь мы указываем, на сколько пикселей нужно поднять фон; подробнее опишу чуть ниже */
color:#66ff66;

/*цвет текста, когда на кнопку наведен курсор */
}

Вот собственно и все, как видите, ничего сложного. Осталось лишь рассказать про параметр «background-position» и зачем он нужен. Вообще, можно обойтись без него, а просто прописать «background» и путь к картинке (или цвет), на которую должен будет меняться фон при наведении курсора. Но в таком случае, если у пользователя слабая скорость Интернета, при наведении курсора будет происходить торможение: сначала фон пропадет вовсе, потом, когда только загрузится новая картинка, он изменится на нужный.

Дабы такого не происходило, нужно нарисовать оба фона на одной картинке: сверху тот, который будет у кнопки в неактивном состоянии, ниже, который появится при наведении курсора. В зависимости от того, какой высоты кнопка, мы и указываем, на сколько пикселей нужно поднять фон.

Чтобы показать меню на сайте, в код страницы нужно добавить такой кусок:

Все. Думаю, эта заметка поможет Вам при создании меню для Вашего сайта. Если что-то не понятно, есть что добавить или обсудить, милости прошу отметиться в комментариях