Для початку побудуйте базову структуру вашого меню. Відкрийте текстовий редактор і створіть нумерований список з підменю, яке виступає як елемент батьківського списку. наприклад:

• перший елемент

• випадає елемент
• випадає елемент2

Збережіть створений список в окремому html-файлі. Далі створіть файл з розширенням .css і введіть всі параметри таблиці стилів.

Видаліть всі відступи і маркери, які застосовуються в ненумерований списку, і задайте ширину меню за допомогою засобів CSS: ul {list-style: none;
width: 200px; }

Задайте відносне положення всіх елементів списку за допомогою атрибута position: ul li {position: relative-}

Далі необхідно оформити підменю, кожен з елементів якого буде з`являтися праворуч від батьківського меню в той момент, коли на пункті буде знаходитися курсор миші: li ul {position: absolute;
left: 199px;
top: 0;
display: none; } Атрибут left має значення на один піксель менше, ніж ширина самого меню. Це дозволяє грамотно розташувати спливаючі пункти без створення подвійних кордонів. Атрибут display використовується для того, щоб приховати підменю при відкритті сторінки.

Змініть стилі для посилань за допомогою відповідних параметрів css. Увімкніть параметр display: block для того, щоб кожна посилання займала весь відведений для неї місце.

щоб меню з`являлося в той момент, коли курсор виявиться над ним (hover), потрібно ввести код: li: hover ul {display: block-}

Задайте за бажанням додаткові параметри відображення посилань і елементів списку.

спливаюче меню готово. Тепер залишилося включити в файл .html атрибут: Спливне меню

Стривайте для початку базову рядок меню. Створіть спеціальний нумерований список з підміню в текстовому редакторі. Зазвичай для цих цілей використовують «Блокнот». Підміню виступає елементом батьківського списку. Наприклад: Перший елементВипадающій елементВипадающій елемент2Випадающій елемент3Випадающій елемент4Випадающій елемент5

Даний список збережіть в окремому html-файлі. Потім створіть файл .css. Введіть всі необхідні параметри таблиці стилів. Робіть це дуже уважно, адже одна помилка, і спливаюче меню буде відображатися некоректно або взагалі не буде працювати.

Видаліть всі маркери і відступи, що застосовуються в ненумерований списку. Задайте ширину меню за допомогою засобів CSS: ul -style: none; width: 200px; }

Відзначте відносне положення всіх елементів списку за допомогою атрибута під назвою position: ul li: relative-}

Потім оформите підміню, елементи якого будуть з`являтися від батьківського меню праворуч в момент, коли курсор мишки буде перебувати над пунктом: li ul: absolute-left: 199px; top: 0-display: none; }

У атрибута left значення на один піксель менше, ніж у ширини самого меню. Це дозволяє правильно розташувати спливаючі пункти без створення подвійних кордонів. Атрибут display використовується, щоб при відкритті сторінки приховати підменю.

Задайте необхідні стилі для посилань за допомогою відповідних параметрів css. Підключіть параметр display: block, щоб посилання займали всі відведені для них місця. Для того щоб меню з`являлося в момент, коли курсор миші буде надаватися над ним (hover), введіть такий код: li: hover ul: block-}

За бажанням задайте додаткові параметри для відображення елементів списку і посилань. Включіть в файл .html атрибут. Спливаюче меню готове до застосування.