Коллективный блог CSS

wmsin20 Мая 2010 13:44:39

CSSГоризонтальное меню. Немного CSS

Вот небольшой примерчик создания симпатичного меню, используя список и немного CSS-стилей.

Сразу говорю что не претендую на гениальность и уникальность идеи, просто вплотную занялся изучением CSS.

Итак, вот наше меню:

 


Далее применяем к элементам списка следующие стили:

#menu {

white-space: nowrap;

float: left; 

}

 

ul {

float: left; 

list-style: none;

margin: 0;

padding: 0;

}

 

li {display: block;

float: left;

}

 

li a {

display: block;

float: left;

text-decoration: none;

letter-spacing: 2px;

padding: 10px;

height: 20px;

line-height: 20px;

background-color: #bbb;

text-align: center;

color: black;

font-family: Tahoma;

font-weight: bold;

font-size: 14px}

 

li a:hover {

background-color: #ddd;

cursor: pointer;

}

 

.brd {

border-right: 1px solid #999

}

 

Получается довольно симпатичная менюшка с мелкими эффектами. Если поиграться со стилями, добавить графики, получается довольно ...

 0