Простое горизонтальное навигационное меню для сайта

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Это очень простое горизонтальное меню на CSS без применения изображений. При наведении курсора мыши отдельная ссылка меню откликается сменой цвета фона.

Демо-пример

Установка меню на сайт

1. Приведенный ниже код вставить в раздел head или в файл стилей сайта style.css:


<style type="text/css">
.menu li  
{ 
display: inline; 
} 
 .menu li a  
{ 
background: #119850; /* цвет в норме */
padding: 3px 30px; 
color: #ffffff; 
text-decoration: none; 
outline: none; 
} 
 .menu li a:visited  
{ 
color: #ffffff; 
} 
 .menu li a:hover  
{ 
background: #FF3333; /* цвет при наведении*/
color: #ffffff; /* цвет ссылки при наведении*/
text-decoration: underline; 
}
</style>

2. А этот код расположите в том месте, где желаете видеть меню и заполните своими данными:


<div class="menu">
<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>
<li><a href="#">Контакты</a></li>
</ul>
</div>

Меню простенькое, но хорошо смотрится. Настройки, а именно, цвета фона и ссылок, можно менять в CSS. Всё. Пока. Ваш Л.М.

Служба поддержки