Инструкция
1
Составьте меню, определите его структуру. Расположите элементы в удобном для будущего пользователя порядке. Подумайте над понятными и грамотными названиями разделов. Определите пункты, которые должны быть выпадающими, и подпункты, которые будут в этих выпадающих списках.
2
Оформите придуманную структуру с помощью html-тэгов. Это будет выглядеть примерно следующим образом: <div id="vmenu"> <ul> <li><a href="#">Ссылка 1.</a></li> <li><a href="#">Ссылка 2.</a> <ul> <li><a href="#">Пункт 2.1.</a></li> <li><a href="#">Пункт 2.2.</a></li> <li><a href="#">Пункт 2.3.</a></li> </ul></li> <li><a href="#">Ссылка 3.</a> <ul><li><a href="#">Пункт 3.1.</a></li> <li><a href="#">Пункт 3.2.</a></li> <li><a href="#">Пункт 3.3.</a></li> <li><a href="#">Пункт 3.4.</a></li></ul> </li></ul> </div>
3
Поместите все меню в блок <div>. Задайте идентификатор id, что позволит в дальнейшем присваивать особенности только этому блоку, не затрагивая остальные. Укажите в идентификаторе некое имя, свойства для которого опишите в следующих шагах.
4
Создайте списки, где <ul> - сам список, а <li> - каждая из его строк. Добавьте для всех будущих ссылкок, которые должны создавать выпадающее меню, свой список с подпунктами. Превратите названия пунктов меню в ссылки, заключив их в тэг <a>. Присвойте его параметру href адрес страницы, на которую будет указывать ссылка.
5
Задайте свойства списка через css, внеся их в css-файл: #vmenu ul { margin:0px; padding:0px; list-style:none; width:250px; }. Задайте равными нулю отступы padding - отступ внутри и margin - отступ снаружи элемента списка. Укажите list-style - стиль маркированного списка, по умолчанию с точками, которые при значении none убираются. Введите ширину списка width.
6
Добавьте свойства элемента списка: #vmenu ul li { position:relative; }. Укажите параметр позиционирования, то есть расположения элементов position. Присвойте ему относительное значение relative, чтобы определять расположение выпадающего меню относительно изначального. Создаваемое меню будет вертикальным.
7
Укажите свойства для списка, расположенного в элементе другого списка: #vmenu li ul { position:absolute; left:250px; top:0; display:none; }. Присвойте параметру позиционирования position значение absolute, чтобы осуществлять абсолютное позиционирование подменю относительно пункта меню. Задайте расположение с помощью отступа пространства слева left и сверху top. Определите параметр отображения элемента display как none, поскольку изначально выпадающий список не должен быть виден.
8
Внесите параметры для ссылок: #vmenu ul li a { display:block; padding:5px; text-decoration:none; color:#606060; background:#d8d8d8; }. Присвойте параметру отображения display значение block, делающее элемент блочным. При этом он видимый и ведет себя, как блок. Задайте отступ padding, цвет текста ссылки color, цвет фона ссылки background, стиль ссылки text-decoration. Значением none убирает подчеркивание по умолчанию.
9
Задайте действие при наведении курсора: #vmenu li:hover ul { display: block; }. Укажите, что при наведении курсора на строку списка li, список ul, расположенный в нем, становится видимым.
10
Добавьте по желанию параметры цвета или изображения для фона, горизонтальные черты, шрифт ссылок и другие свойства, определяющие внешний вид меню.