Хоризонтално меню

Понеже имаше запитвания как съм направил менюто реших да напиша нещо като урок, надявам се да бъда полезен.

Като за начало нека създаден един неподреден списък <ul>

<ul>
<li><a href="#">Купува</a></li>
<li><a href="#">Продава</a></li>
<li><a href="#">Под наем</a></li>
<li><a href="#">Контакти</a></li>
</ul>

до тук нищо интересно обикновен списак но сега става интересното
ето интересната част с CSS
Нека подредин списака хоризонтална линия това става с display:inline, добавяме и padding-left:10px такаче да има разтояние между отделните бутони , с float:left задаваме направление на бутоните ( на ляво)

ul li{
display:inline;
text-align:center;
padding-left:10px;
float:left;
}

Сега трябва да имате едно хоризонтално меню, нека да го направим по-красиво, като добавим „стил“ към линковете

ul li a{
padding-top:10px;/*Добавяме 10рх падинг понеже синята лента ми е с такава височина*/
display:block;/*задава блокова структура на линковете*/
width:100px;/*Ширина на бутона в случая се съобразявам с картинката която ползавм за бекграунд*/
height:32px;/*Височина на бутона отново се съобразявамс картинката която ползвам за бекграунд тя е 42рх но съм извадил 10рх понеже съм задал и 10рх падинг*/
background:url(http://kick-off-fm.qhoster.net/projects/wtestate/images/menubg.jpg) no-repeat center;/* картинката която се бекграунд*/
color:#999;/*Цвят на буквите*/
text-decoration:none;/*В случая това премахва подчертаването на линковете*/
font-size:16px;/*Големина на буквите*/
font-weight:bold;
}
1ul li a:hover{
color:#fff;
background:url(http://kick-off-fm.qhoster.net/projects/wtestate/images/mutehover.jpg) no-repeat center;
}

И в краина сметка менюто се получи, не е сложно, може да има и по лесен и елементарен начин.
Сега остава да експерементирате и да направите свое меню

Урока е написан специално за http://web-tourist.net .