Тема 22 DropMenu

DropMenu

Пояснення:

За допомогою тегу <ul></ul> ми можемо створити меню для нашого сайту.

За допомогою тегу <li></li> ми можемо створити окремі пункти меню для нашого сайту.

Властивість display - показує нам, як саме елемент буде відображатися у документі.
display: block; - Елемент відображається як блоковий.
display: none; - Тимчасово видаляє елемент з документу. Займане ним місце не резервується і веб-сторінка формується так, немов елемента і не було.
display: inline; - Елемент відображається як вбудований.
display: inline-block; - Це значення генерує блоковий елемент, який обтікає іншими елементами веб-сторінки подібно вбудованому елементу.
Тому додамо властивість display: block;

Drop menu меню на сайті

Щоб створити drop menu, нам потрібно створити список всередині списку.Щоб при наведенні наші підпункти з являлися , потрібно використати псевдоклас hover і властивість display: block;

Горизонтальне меню на сайті

Основне завдання при створенні горизонтальної навігації - розташувати пунктів меню в один ряд. Це можна зробити декількома способами. Перший варіант - поставити пунктам списку властивість display із значенням inline або inline-block:

Таблиця:

№	Тема	Приклад коду	Підсумок
1	Основне меню	`<body> <ul class="menu"> <li>Головна</li> <li>Послуги</li> </ul> </body>`	Створюємо список пунктів меню. <ul> — контейнер, <li> — пункт.
2	Підменю	`<body> <ul class="menu"> <li>Головна</li> <li>Послуги <ul class="submenu"> <li>Веб-дизайн</li> </ul> </li> </ul> </body>`	Вкладений список створює підпункти. Спочатку вони приховані.
3	Сховане підменю	`<style> .submenu { display: none; } </style>`	Підменю не показується і не займає місця на сторінці.
4	Показ підменю на hover	`<style> .menu li:hover > .submenu { display: block; } </style>`	При наведенні на пункт меню підменю з’являється.
5	Позиціонування підменю	`<style> .menu li { position: relative; } .submenu { position: absolute; top: 100%; left: 0; } </style>`	Підменю з’являється прямо під своїм пунктом, а не десь на сторінці.

build info

compiler: 2.0.5.1 · 4054EF9BF6C4510A
built: 2026-11-08 14:31:25 UTC