Автор: 
Вертикальное меню из списка
делаем из списка меню на css
само меню будет выглядеть так
Code
<div id="m">
<ul>
<li><a href="/"></li>
<li><a href="/"></li>
<li><a href="/"></li>
<li><a href="/"></li>
</ul>
</div>
<ul>
<li><a href="/"></li>
<li><a href="/"></li>
<li><a href="/"></li>
<li><a href="/"></li>
</ul>
</div>
тег div нам нужен для того чтобы обозначит ширину, шрифт и для того чтобы все остальные списки были обычные.
Тег ul обозначает что сейчас будет список ну а тег li выделяет каждую графу списка
вот пример небольшого списка
Code
<ul>
<li>привет</li>
<li>привет</li>
<li>привет</li>
</uL>
<li>привет</li>
<li>привет</li>
<li>привет</li>
</uL>
вот как он будет выглядеть
- привет
- привет
- привет
теперь займёмся стилизацией нашего меню, для начала пропишем в css
Code
#m {
width: 300px;
font-family:arial;}
width: 300px;
font-family:arial;}
width- ширина
font-family - шрифт
Code
ul {
list-style: none;
margin: 0;
padding: 0;}
list-style: none;
margin: 0;
padding: 0;}
list-style - убираем стиль списка (пулек нету :))
margin, padding - убираем отступы
теперь прописываем вид ссылок
Code
#m li a {
height: 30px;
text-decoration: none;
border-top:1px solid#ffffff;}
height: 30px;
text-decoration: none;
border-top:1px solid#ffffff;}
Здесь мы прописали стиль для всех ссылок в id m в списке li и в в теге a
height-высота каждой ссылки
text-decoration: none; убираем нижнее подчёркивание у ссылок
border-top - делаем верхнию обводку толщиной в 1px и белым цветом
Code
#m li a:link, #m li a:visited {
color: #006600;
font-weight:bold;
display: block;
background: url('http://i003.radikal.ru/0908/b4/1de3302b38b2.png');
padding: 10px 0 0 10px;}
color: #006600;
font-weight:bold;
display: block;
background: url('http://i003.radikal.ru/0908/b4/1de3302b38b2.png');
padding: 10px 0 0 10px;}
Здесь vs прописали стиль для обычных и для активных ссылок
color- цвет ссылок
font-weight-делаем ссылки жирными
display - показывает элемент как блочный
background - здесь фон (я нарисовал картинку размером 300х40)
padding - выравниваем текст, делаем отступ сверху в 10px и отступ с лева
Code
#m li a:hover {
color: #77df2b;
background: url('http://i060.radikal.ru/0908/f5/a201b35a6bb2.png');
padding: 10px 0 0 10px;}
color: #77df2b;
background: url('http://i060.radikal.ru/0908/f5/a201b35a6bb2.png');
padding: 10px 0 0 10px;}
здесь прописываем стиль что будет при наведении
источник: 7ucoz.com
