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

Итак, приступим. Меню будет представлять собой список, так как и теоретически и практически это наилучший способ структурирования меню. Прежде всего создадим HTML-разметку.

<ul>
  <li><a href="/">Главная</a></li>
  <li><a href="about.html">О компании</a></li>
  <li><a href="products.html">Каталог продукции</a></li>
  <li><a href="gallery.html">Фото объектов</a></li>
  <li><a href="responses.html">Отзывы клиентов</a></li>
  <li><a href="scheme.html">Схема проезда</a></li>
  <li><a href="feedback.html">Форма для связи</a></li>
</ul>

Далее приведу файл стилей, который будет подробно прокомментирован.

ul {
  list-style:none;
  margin:0;
  padding:0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:0.9em;
  font-weight:bold;
  width:20em;
  border-bottom:1px solid #003;
  border-right:1px solid #003;
  border-left:1px solid #003;
}
ul li {
  border-top:1px solid #003;
}
ul li a {
  display:block;
  padding:2px 2px 2px 0.5em;
  border-left:15px solid #AD2039;
  background-color:#FFA6BD;
  color:#AD2039;
  text-decoration:none;
  width:100%;
}
html > body ul li a {
  width:auto;
}
ul li a:hover {
  border-left:15px solid #FFA6BD;
  background-color:#AD2039;
  color:#FFA6BD;
}

Рассмотрим подробнее стилевое оформление элемента ul. Сначал скроем стандартные маркеры списка, затем установим значения свойств margin и padding (почему мы устанавливаем именно оба свойства можно прочитать в статье «CSS: задание отступов и изменение стилей маркера в списках.»). Свойства font установят нужные шрифты и размер. Свойство width ясное дело будет отвечать за ширину списка. Следующие три строки устанавливают рамку шириной в 1px справа, снизу и слева для элемента ul.

Почему не сверху? Потому, что неплохо иметь такую же тонкую рамку, которая будет отделять каждый элемент списка. Это мы проделаем, написав правило border-top:1px solid #003; для ul li (для всех элементов li, являющихся дочерними по отношению к элементу ul).

В следующем правиле ul li a мы зададим стили ссылок. Поскольку элемент a по умолчанию – это строчный элемент, нам необходимо изменить его отображение, чтобы элементы a отображались как блочные. Это необходимо для того, чтобы можно было использовать меню щелкая мышью на всем выбираемом элементе, а не только на тексте ссылки. Делаем это, задавая свойству display значение block.

Определяем отступы со всех сторон в свойстве padding, задаем рамку слева толщиной в 15px в свойстве border-left, определяем свойства background-color (цвет фона) и color (цвет текста), а также удаляем подчеркивание ссылок, воспользовавшись свойством text-decoration.

Последняя строчка задает теперь уже блочному элементу ширину width в 100%. Это сделано специально для IE, но может создать проблемы в Netscape Navigator и IE для Mac и поэтому следующее правило html>body ul li a написано специально для решения этой проблемы. IE не сможет его прочесть, поскольку не умеет обрабатывать правила для селектора потомка.

И наконец последнее правило будет задавать стили использующиеся при наведении указателя мыши на ссылку. Здесь мы просто задаем другие цвета в свойствах border-left, background-color и color.

Вот как это будет выглядеть. По моему неплохо. Такое меню будет вполне работоспособно и при отключенной поддержке стилевого оформления.