Выпадающие меню

Создание выпадающего меню начинается с определения его структуры на основе многоуровневого списка.

Далее следует убрать маркеры в списке, отступы, задать ширину меню.

Чтобы относительно основного меню абсолютно позиционировать подменю, зададим для основного меню значение relative свойства position, а для подменю — absolute. Используя свойства left и top, укажем положение подменю относительно родительского пункта меню. Чтобы подменю не отображалось при открытии документа, определим свойство display со значением none.

Для того, чтобы каждая ссылка занимала всё отведённое для неё место внутри содержащего её элемента списка, присвоим свойству display значение block.

Организуем появление подменю при наведении указателя мыши на элемент основного меню.

Задание

• В новом документе реализуйте вертикальное выпадающее меню.
• Оформите меню: сделайте так, чтобы при наведении на пункты основного меню и подменю изменялся фон и цвет текста, другие элементы (например, рамки).

• Для сайта "Туристическая фирма" модифицируйте Ваше горизонтальное меню в горизонтальное выпадающее меню. Меню должно располагаться на каждой странице.
• Используя селектор дочерних элементов, оформите по-разному элементы главного меню и подменю.

  Основное отличие селектора дочернего элемента от рассмотренного ранее селектора потомка — тот факт, что если селектор потомка выбирает все потомки, независимо от уровня вложенности, то селектор дочернего элемента выбирает потомков только первого уровня — то есть непосредственно вложенные элементы.

  При использовании селектора потомка и Понятие1, и Понятие2 будут окрашены в красный цвет.

  При использовании селектора дочернего элемента только Понятие1 будет окрашено в красный цвет