Мы уже пробовали создавать вертикальное текстовое меню на основе списка. Попробуем теперь использовать список для создания горизонтального текстового меню.

Как всегда первый шаг – это создание HTML-разметки.

<ul>
  <li><a href="/">Главная</a></li>
  <li><a href="products.html" id="current">Продукция</a></li>
  <li><a href="gallery.html">Фото</a></li>
  <li><a href="responses.html">Отзывы</a></li>
  <li><a href="feedback.html">Контакты</a></li>
</ul>

Здесь необходимо обратить внимание на пункт, где встречается id=»current». В реально работающем меню необходимо определять текущую страницу при ее загрузке и присваивать этот id соответствующему пункту.

А теперь приведу таблицу стилей для организации этого списка в горизонтальное меню.

ul {
  padding:3px 0;
  margin-left:0;
  border-bottom:1px solid #003;
  font:bold 8pt Verdana, sans-serif;
}
ul li {
  list-style:none;
  margin:0;
  display:inline;
}
ul li a {
  padding:3px 0.5em;
  margin-left:3px;
  border:1px solid #003;
  border-bottom:none;
  background-color:#FFA6BD;
  text-decoration:none;
  color:#AD2039;
}
ul li a:hover {
  background-color:#AD2039;
  color:#FFA6BD;
}
ul li a#current {
  background-color:#fff;
  border-bottom:1px solid #fff;
}

Ничего особенно хитрого тут нет. Сначала зададим отступы и левое поле для элемента ul, там же определяем нижнюю рамку для всего элемента и шрифт, а вот затем начинается более интересное правило. Для ul li мы скрываем стандартные маркеры, полям задаем значение 0 и наконец display:inline; – вот что заставляет наш список «вытянуться» в строку.

Дальше описываем элемент a, задавая ему отступы, поля, рамки, определяя цвет фона и шрифта. Обращу внимание разве что на определения свойства border. Сначала заданы значения свойства border для всех четырех сторон, а в следующей строке мы пишем border-bottom:none;, т.е. отменили рамку снизу. Такой вариант написания вполне имеет право на существование.

Далее определяем стили элемента а при наведении на него указателя мыши – тут мы изменим только цвет фона и цвет текста.

И самое последнее – стили для элемента имеющего id=»current». Цвет фона задаем совпадающим с цветом основного фона страницы, как впрочем и цвет нижней рамки.

Вот, что у нас получилось в итоге.