Web-урок 1. Создание вертикального многоуровнего меню на CSS.

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

Шаг 1. Проще всего, а самое главное правильнее, создавать меню навигации с помощью многоуровневых списков. Вы можете использовать как маркированный, так и нумерованный список. Итак, Вам необходимо создать многоуровневый список, первый уровень которого содержит основные позиции меню, а вложенные уровни содержат позиции подменю, которые изначально будут на странице скрыты. И не забудьте о том, что каждая позиция меню должна быть ссылкой, на этом этапе Вы можете в качестве признака  атрибута href указать диез (#).

<ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас </a>
               <ul>
               <li><a href="#">История</a></li>
               <li><a href="#">Команда</a></li>
               <li><a href="#">Офис</a></li>
               </ul>
    </li>
    <li><a href="#">Услуги</a>
                <ul>
                <li><a href="#">Web-дизайн</a></li>
                <li><a href="#">Дизайн</a></li>
                <li><a href="#">Хостинг</a></li>
                <li><a href="#">Продвижение</a></li>
               </ul>
    </li>
    <li><a href="#">Контакты</a>
                <ul>
                <li><a href="#">адрес №1</a></li>
                <li><a href="#">адрес №2</a></li>
                <li><a href="#">адрес №3</a></li>
                <li><a href="#">адрес №4</a></li>
               </ul>
    </li>
</ul>

Шаг 2. Таким образом мы получили каркас для нашего меню . Следующим этапом нашей работы будет создание стилей, которые создадут соответствующее форматирование для элементов нашего списка.
Необходимо убрать отступы(как внутренние, так и внешние) и маркеры , которые создают списки по умолчанию, а также ширину всего списка. Для этого нам необходимо переопределить тег ul. А именно:

        ul   {
                margin: 0px;     
                padding: 0px;
                list-style-type: none; 
                width: 150px;
               }

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

      ul li    {
                 position: relative;
                }

      li ul    {
                 position: absolute;
                 left: 149px;
                 top: 0px;
                 display: none;
                }
Далее зададим стиль для ссылок.

            a  {
                 display: block;
                 text-decoration: none;
                 color: #777;
                 background: #fff;
                 padding: 5px;
                 border: 1px solid #ccc;
                 border-bottom: 0;
                }
 

Стили к ссылкам Вы можете изменить в соответствии с Вашим дизайном. Однако, важно присвоить свойство display:block, для того чтобы они заняли всю ширину, отведенного под них блока.
Если Вы посмотрите результат Вашей работы на этом этапе, то обратите внимание, чтоотсутствует нижняя граница у блока ссылки. Исправим это, добавив следующуее свойство к тегу ul: border-bottom: 1px solid #ccc.

Итак, на этом этапе мы завершили описание стилей по форматированию элементов списка. Осталось привести наше меню в действие. Нам необходимо, чтобы при наведении мыши на родительский элемент появлялось подменю. Это можно описать следующем командой:

 li:hover ul   {
                      display: block;
                    }

Вот собственно и все. Творите с удовольствием !