Горизонтальное css - меню для сайта

css меню

В этом примере  мы создадим простое горизонтальное меню для сайта при помощи html и css.

Для этого сначала сделаем html - разметку нашего будущего меню:

<ul>
<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>

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

Для этого пропишем следующий код:

<style>
ul{width:700px;margin:0 auto;}
li{display:inline-block;border:1px solid rgb(95, 79, 17);padding:10px 20px;margin-right:5px;background:coral;color:white;text-transform:uppercase;}
li:hover{background:orange;color:black;}
a{color:white;text-decoration:none}
</style>

Читать далее