Редактор Онлайн

<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:4em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;}
</style>
</head>

<body>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
<li><a href="#">Cсылка 4</a></li>
</ul>

<p>
В примере выше, вы позволили элементу ul и элементу a плавать слева.
Элементы li будут отображаться как встроенные элементы (не будет переносов строки до и после элемента). В результате получается список
в одной строке.
Элемент ul имеет ширину в 100% и каждая гиперссылка в спсике имеет ширину в 6em (6 размеров текущего шрифта).
Мы добавляем некоторые цвета и границы, чтобы сделать меню повыразительнее.
</p>

</body>
</html>

Ваш Результат:

Отредактируйте код сверху и кликните кнопку, чтобы посмотреть результат.

Уроки CSS - Попробуйте сами