В документе html создаем список :
<ul>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
</ul>  - таким образом получаем простой маркированый список.
Теперь  предстоит этот список отредактировать с помощью CSS.
Запишем в наш файл CSS вот такой код:
ul {
list-style:none;}

li a {
color:#fff; -цвет активной части списка
text-decoration:none; - декорации текста
padding: 4px 7px; - отступ содержимого от рамки объекта
width:120px; - ширина объекта
background:#0076ba; - фон объекта
display:block; - содержимое типа блок
border:1px solid #fff; - граница объекта
font-weight:bold; - шрифт
}

Мы задали сразу стили для всего списка и его элементов в случае, если они – ссылки.
Теперь добавим эффектов при наведении мыши на кнопку:

li a:hover {
background:#d36800;
}

Вот, и всё. Наше меню готово.
Дмаю принцип создания понятен. Изменяйте код и редактируйте по своему желанию!!Удачи!!!