Горизонтальное меню

Создаем простой маркированный список. Присвоим нули значениям внутренних и внеш них полосок и удалим маркеры, установленные по умолчанию. В нашем примере горизонтальная панель должна иметь ширину 720 пикселей, а фоном будет служить повторяющийся оранжевый градиент.

/*код стиля*/
ul {
margin: 0;
padding: 0;
width: 720px;
background: #FAA819 url(../images/mainNavBg.gif) repeat-x;
list-style: none;
}

Список оформленный таким образом будет выводиться вертикально. Чтобы вывести горизонтально, можно применить один из двух методов: вывести элементы списка как строчные или сделать элементы списка плавающими и выровнять их по левому краю. Вывод элементов как строчных - более простой метод, однако опыт показывает, что впоследствии он может привести к появлению неожиданных ошибок. Поэтому применим второй метод: сделать элементы списка плавающими.

ul li {
float: left;
}

Если элемент плавающий, то он не занимает пространство в потоке документа. Следовательно, родительский элемент (т.е. список) остается без содержимого и сворачивается, скрывая фон списка. Существует два способа заставить родительский элемент содержать плавающие дочерние элементы. Первый способ состоит в добавлении очищающего элемента. Но он приводит к появлению на странице лишней разметки, поэтому он не рационален. Второй способ основан на превращении родительского элемента тоже в плавающий с последующей очисткой его дальше на странице, например, с помощью нижнего колонтитула.

ul {
margin: 0 0 0 50px;
padding: 0;
width: 720px;
background: #FAA819 url(../images/mainNavBg.gif) repeat-x;
list-style: none;
float:left;
}

Как и в примере с вертикальной панелью навигации, гиперссылки в горизонтальной панели сделаны похожими на кнопки путем присвоения свойству display значения block. Если необходимо сделать все кнопки одинаковой ширины, то присвойте им высоту и ширину явно. В данном примере каждая кнопка имеет ширину, соответствующую размерам текста каждой гиперссылки. Для этого левым и правым внутренним полоскам присвоены значения в кеглях (em). Текст гиперссылок центрирован по вертикали с помощью свойства line-height. Подчеркивание ссылок отключено, а их цвет задан белым.

ul a {
display: block;
float: left;
padding: 0 2em;
line-height: 2.1em;
background: url(images/divider.gif) repeat-y left top;
text-decoration: none;
color: #fff;
}

Создадим разделители между гиперссылками. Для этого применим изображение разделителя в качестве фонового изображения к левому краю каждой гиперссылки.

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

ul .first a {
background: none;
}

И, наконец, подставим наведенное состояние. Для этого достаточно изменить цвет гиперссылки.

ul a:hover {
color: #333;
}

Панель готова.

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