Горизонтальное меню
Меню сайта, которые мы видим на каждом сайте, могут быть оформлены как списки. По большому счету, меню сайта и является списком ссылок. Но для того чтобы список отображался не в том виде, в каком выводит браузер, следует воспользоваться каскадными таблицами стилей CSS. В данном случае, нам следует расположить элементы списка горизонтально и убрать маркеры.
Создадим базовый блок DIV в котором разместим наше меню. Этот блок в дальнейшем нужно будет использовать для позиционирования горизонтального меню на сайте. Зададим для блока <div id=”div_container”> и пропишем для него стиль в CSS:
#div_container {
padding: 5px;
border: 1px solid #000;
margin-bottom: 25px;
}
Теперь создадим стиль для списка.
#div_container ul {
margin-left: 0;
padding-left: 0;
/* задаем отображение списка в строку */
display: inline;
}
Создаем стиль отображения каждого элемента списка:
#div_container ul li {
margin-left: 0;
padding: 2px 10px 0 0 ;
/* задаем разделитель между пунктами меню */
border-left: 1px solid #000;
/* запрещаем отображение маркеров списка */
list-style: none;
display: inline;
}
Следующий стиль создан для первого элемента списка, в котором не должно быть вертикального разделителя слева:
#div_container ul li.first {
margin-left: 0;
border-left: none;
list-style: none;
display: inline;
}
Теперь приведем пример кода меню:
<div id="div_container">
<ul>
<li><a htef="#">Link 1</a></li>
<li><a htef="#">Link 2</a></li>
<li><a htef="#">Link 3</a></li>
<li><a htef="#">Link 4</a></li>
</ul>
</div>
В заключение следует создать стиль для ссылок. Например:
#div_container ul li a, a:hover, a:link {
text-decoration: none;
font: 12px Tahoma;
}
Не работает!