Вертикальне меню з випадає підменю
Ще один поширений тип меню - це меню з випадають підміню. Зазвичай в таких меню тільки два рівня, але зустрічаються і багаторівневі, коли з випадаючого підменю може випадати ще одне і так далі.
Розмітка таких меню проста - звичайний багаторівневий список. При створенні такого меню необхідно використовувати абсолютне і відносне позиціонування.
Зазвичай елементам списку li верхнього рівня задають відносне позиціонування, а для меню, що випадає - абсолютне.
Виглядати воно буде наступним чином.
CSS-властивість position задає режим позиціонування елементів. Заводський параметр static. яке означає «звичайне позиціонування».
Значення relative означає «відносне позиціонування». Щодо позиційовані елемент можна переміщати щодо його вихідного положення.
Значення absolute властивості position задає елементу абсолютне позиціонування.
Абсолютно позиційований елементи мають наступні особливості:
Тепер приступимо до справи.
Для початку створимо шаблон нашого майбутнього меню.
Тепер приберемо внутрішні і зовнішні відступи і маркери.
Преукрасить наше меню.
Тепер займемося спливаючими підпунктами.
В принципі меню готове але, для привабливості додамо трикутнички показують, що у пункту меню є підпункти.
Наше меню готове можете використовувати його на своєму сайті.