Вертикальное меню с эффектом тени

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Меню на CSS без использования изображений. При наведении мыши строка меню изменяет цвет и возникает эффект тени справа и снизу.

Установка на сайт:

1. Скопировать и вставить код со стилями в файл стилей сайта или в раздел head своего сайта:

<style type="text/css">
.bevelmenu
{
list-style-type: none;
margin: 0;
padding: 0;
width: 160px;
}

.bevelmenu li a
{
display: block;
width: 100%;
padding: 2px 10px;
text-decoration: none;
font-weight: bold;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
text-decoration: none;
text-align: left;
}

.bevelmenu li a:hover
{
color: black;
background-color: #FFE271;
border-style: outset;
}

html>body .bevelmenu li a:active   /* Apply mousedown effect (non IE browsers only) */
{ 
border-style: inset;
}
</style>

2. А этот участок кода скопируйте и вставьте в раздел body своего сайта, где желаете видеть меню:

<ul class="bevelmenu">
<li><a href="#">Главная</a></li>
<li><a href="#">Программы</a></li>
<li><a href="#">Оптимизация</a></li>
<li><a href="#">Дизайн</a></li>
<li><a href="#">Проекты</a></li>
<li><a href="#">Контакты</a></li>			
</ul>

Пропишите свои URL-лы и названия ссылок. Некоторые настройки, например, ширина меню (width), отступы (margin и padding), цвет (color и background-color), размер шрифта (font-weight), выравнивание текста (text-align) и другие, доступны в CSS.

Желаю всех благ! Ваш L.M.