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

Гиперссылка является строчным элементом. Она активизируется только при щелчке на ее содержимом. В некоторых случаях желательно увеличить область содержимого, чтобы заметить гиперссылку и щелкнуть по ней было легче. Средства CSS позволяют сделать гиперссылку похожей на кнопку. Для этого свойству display гиперссылки надо присвоить значение block, задать ширину. высоту и другие параметры для настройки внешнего вида гиперссылки.

/*код стиля*/
li {list-style-type:none};

a.menu{
display:block;
width:200px;
line-height:30px;
font-family:arial;
font-size:14px;
text-align:left;
color: #7B4273;
margin: 3px 0;
background-color:#e3d4cf;
text-decoration:none;
padding-left:10px;
/*вскругление*/
border:1px solid #fff;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
/*наложение тени*/
box-shadow:0 1px 1px #000;
-moz-box-shadow:0 1px 1px #000; /* добавляет тень к элементу */
-webkit-box-shadow:0 1px 1px #000;
-o-box-shadow:0 1px 1px #000;
-ms-box-shadow:0 1px 1px #000;
}

a.menu:hover {
color:#fff;
text-decoration:none;
}


<li><a class="menu" href="#">О языках программирования </a></li>
<li><a class="menu" href="#">HTML и основные понятия</a></li>
<li><a class="menu" href="#">Примеры создания таблиц</a></li>
<li><a class="menu" href="#">Каскадные таблицы стилей</a></li>

Это позволит получить такой вид ссылок:

Просмотреть файл

Вертикальная панель меню с применением фонового изображения гиперссылки

На основе метода, использованного для стилизации списков, можно создать вертикальное меню. Для этого применим изображение гиперссылки в качестве изменяемого рисунка. Размер рисунка 400х40 px.

Для вывода обычного состояния фоновое изображение выравнивается влево. Тексту гиперссылки присвоен отступ 50px, чтобы он не "наехал" на стрелочку в фоновом изображении. При наведении мышки на кнопку изображение выравнивается вправо.

/*код стиля*/
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul a {
display: block;
width: 200px;
height: 39px;
line-height: 39px;
color: #000;
background: #94b8e9 url(images/rollover.jpg) no-repeat left bottom;
text-indent: 50px;
text-align:left;
}
li.first a {
height: 40px;
line-height: 40px;
text-decoration: none;
}
a:hover, .selected a {
background-position: right bottom;
color: #fff;
text-decoration: none;
}
li {
display: inline;
}


<ul>
<li class="first selected"><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>

Это позволит получить такой вид вертикальной панели: