Инструкция
1
Для начала постройте базовую структуру вашего меню. Откройте текстовый редактор и создайте нумерованный список с подменю, которое выступает как элемент родительского списка. Например:
  • Первый элемент
    • Выпадающий элемент
    • Выпадающий элемент2
2
Сохраните созданный список в отдельном html-файле. Далее создайте файл с расширением .css и введите все параметры таблицы стилей.
3
Удалите все отступы и маркеры, которые применяются в ненумерованном списке, и задайте ширину меню при помощи средств CSS:ul { list-style: none;
width: 200px; }
4
Задайте относительное положение всех элементов списка при помощи атрибута position:ul li { position: relative; }
5
Далее необходимо оформить подменю, каждый из элементов которого будет появляться справа от родительского меню в тот момент, когда на пункте будет находиться указатель мыши:li ul { position: absolute;
left: 199px;
top: 0;
display: none; }Атрибут left имеет значение на один пиксель меньшее, чем ширина самого меню. Это позволяет грамотно расположить всплывающие пункты без создания двойных границ. Атрибут display используется для того, чтобы скрыть подменю при открытии страницы.
6
Задайте нужные стили для ссылок при помощи соответствующих параметров css. Включите параметр display: block для того, чтобы каждая ссылка занимала все отведенное для нее место.
7
Чтобы меню появлялось в тот момент, когда курсор окажется над ним (hover), нужно ввести код:li:hover ul { display: block; }
8
Задайте по желанию дополнительные параметры отображения ссылок и элементов списка.
9
Всплывающее меню готово. Теперь осталось включить в файл .html атрибут :Всплывающее меню