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