Приступим!

Для начала напишем HTML код, отвечающий за последовательность расположения элементов меню:

<ul>

<li>

<a href="#">Главная</a></li>

<li>

<a href="#">О Нас</a>

<ul>

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

</ul>

</li>

<li><a href="#">Контакты</a>

<ul><li><a href="#">Россия</a></li>

<li><a href="#">Украина</a></li>

</ul>

</li>

</ul>

Для верстки меню мы используем стандартные списки. При этом то, что должно “выпадать” находится в отдельном списке (<ul>) и в то же время является элементом родительского списка (<li>). Нам нужно, чтобы при наведении на курсора на элемент <li> появлялось содержание встроенного в него элемента <ul>. Займемся этим!

Для начала наведем красоту. Для этого присвоим родительскому элементу <ul> стиль nav:

<ul id="nav">

Теперь пропишем несколько свойств для этого стиля:

#nav, #nav ul {

list-style: none;

margin: 0;

padding: 0;

border: 1px solid #000;

background: #515151;

float: left;

}

Что мы сделали? Мы обнулили все отступы, убрали маркеры возле
элементов списка, установили границу и фоновый цвет а также выравнили
элементы по левому краю.

Пока что мы види не меню, а тарабарщину какую-то!

Но сейчас мы это исправим.

Позиционируем элемент относительно его исходного места:

#nav li {

position: relative;

}

Убираем подчеркивание ссылок, устанавливаем цвет и ширину элементов со ссылками:

#nav a {

color: #fff;

text-decoration: none;

display: block;

width: 120px;

}

Теперь займемся блоком, который должен появляться при наведении:

#nav li ul {

display: none;

left: 120px;

top: 0px;

position: absolute;

}

Сдвигаем этот список на 120 пикселей влево, так как ширина
родительского блока имеет именно такое значение. Абсолютно
позиционируем (это значит, что элемент будет выравниваться относительно
краев браузера).Также обязательно устанавливаем свойство display: none;, которое позволяет нам скрыть выпадающие элементы во время открытия странички.

А сейчас добавим ещё несколько стилей для красоты:

#nav a:hover {

color:#9999CC;

text-decoration: none;

display: block;

width: 120px;

background:#990000;

}

Теперь при наведении на ссылку, её цвет и фон будут изменяться.

И наконец последний штрих:

#nav li:hover ul {

display: block;

}

Данное свойство указывает на то, что при наведении на элемент родительского списка li:hover, вложенный список ul станет видимым. (Помните display:none?)

Вот наш результат: Пример 1

А что если требуется создать горизонтальное выпадающее меню? Достаточно заменить лишь несколько строчек кода.

Во-первых, устанавливаем свойство float:left для элементов списка (li),
чтобы они отображались в одну линию (горизонтально), а, во-вторых,
убираем отступы от краев страницы у выпадающих списков для их
коректного отображения:

#nav li {

position: relative;

float:left;

}

#nav li ul {

display: none;

position: absolute;

}

Вот мой результат: Пример 2

И не бойтесь заглянуть в код странички!