Вертикальное меню, деловой стиль

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

Меню на основе CSS, без использования изображений. Каждая строка меню снизу и справа имеет слегка видимое обрамление, что придаёт ей немного объёмности.

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

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

<style type="text/css">
.buttonmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
text-align: left;
}

.buttonmenu li a{
color: white;
display: block;
width: 100%;
padding: 2px 4px;
text-decoration: none;
font-weight: bold;
border: 1px solid;
border-color:#D5BFD0 #5A3A54 #5A3A54 #D5BFD0; /*light dark dark light*/
background-color: #704968;
text-decoration: none;
padding-left: 10px;
}


.buttonmenu li a:visited{
color: white;
}

.buttonmenu li a:hover, .buttonmenu li a:active{
color: black;
background-color: #CDB4C8;
}
</style>

2. Этот участок кода скопируйте и вставьте в раздел body своего сайта, где будет находиться меню:

<ul class="buttonmenu">
<li><a href="#">Главная</a></li>
<li><a href="#">CSS-библиотека</a></li>
<li><a href="#">CSS-практика</a></li>
<li><a href="#">Оптимизация</a></li>
<li><a href="#">Юзабилити</a></li>
<li><a href="#">Графика</a></li>		
</ul>

Впишите свои URL и названия ссылок. Пока! L.M.