Горизонтальное меню с эффектами тени и зеркальной симметрии

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

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

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

1. Код в таблице внизу вставить в раздел head или файл стилей сайта:

<style type="text/css">
.bevelmenu{
font: bold 13px arial;
padding: 6px 0;
margin: 0;
width: 100%;
background-color: #FFF2BF;
text-align: left;  /* чтобы выровнять меню справа страницы - установите значение "right", по центру - "center" */
}

.bevelmenu li{
list-style: none;
display: inline;
}

.bevelmenu li a{
padding: 3px 0.5em;
text-decoration: none;
color: black;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
}

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

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

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

<ul class="bevelmenu">
<li><a href="#">Главная</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Дизайн</a></li>
<li><a href="#">CSS и HTML</a></li>
<li><a href="#">Контакты</a></li>
</ul>

Проставьте свои ссылки и их названия.

Всё просто, до безобразия! Пока! L.M.