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

Разметка стандартная — двухуровневый список.

Алгоритм оформления почти такой же, как и в предыдущем случае. Сначала задаем режимы позиционирования, затем стили для подменю, затем механизм выпадания.

Так как мы хотим, чтобы выпадающее меню было вертикальным, то надо изменить селектор .main-menu li на .main-menu > li, чтобы блочно-строчными были только элементы списка верхнего уровня.