Ще один поширений тип меню — це меню з випадаючими підміню. Зазвичай в таких меню тільки два рівня, але зустрічаються і багаторівневі, коли з випадаючого підменю може випадати ще одне і так далі.

Розмітка таких меню проста-звичайний багаторівневий список. При створенні такого меню необхідно використовувати абсолютне і відносне позиціонування.

Зазвичай елементам списку li верхнього рівня задають відносне позиціонування,а для випадаючого меню — абсолютне.

Виглядати воно буде наступним чином.

Css-властивість position задає режим позиціонування елементів. Значенням за замовчуванням є static , яке означає “звичайне позиціонування”.

Значення relative позначає «відносне позиціонування». Відносно спозиціонований елемент можна переміщати щодо його вихідного положення.

Значення absolute властивості position задає елементу абсолютне позиціонування.

Абсолютно спозиціоновані елементи володіють наступними особливостями:

  • випадають з потоку документа. Місце, яке вони займали, стає як би порожнім і його займають сусідні елементи.
  • ширина за замовчуванням залежить від вмісту (а не розтягується на всю доступну ширину).
  • залишаються на тому ж місці, де були, якщо не задані значення властивостей top , left , right , bottom .

Тепер приступимо до справи!!!

Для початку створимо шаблон нашого майбутнього меню.

Готово!!!

Тепер приберемо внутрішні і зовнішні відступи і маркери.

ul{ margin: 0; padding: 0; list-style: none;}

Преукрасим наше меню.

.menu a{ background:#3d3d3d; color: #fff; padding: 10px; display: block; border-bottom: 1px solid #666; transition: 0.5s all;}.sidebar{ width: 200px; margin: 20px;}.menu a:hover{ background: #666; padding: 10px 0 10px 20px;}.menu li:first-child a, .menu li .v_menu li:first-child a{ border-radius: 3px 3px 0 0;}.menu li:last-child a, .menu li .v_menu li:last-child a{ border-radius: 0 0 3px 3px; border-bottom: 0;}.menu li .v_menu li a{ border-radius: 0;}

Тепер займемося спливаючими підпунктами.

.p_menu{position: relative;}.v_menu{ position: absolute; width: 100%; left: 100%; top: -9999px; opacity: 0; border-left: 10px solid transparent; transition: 0.5s opacity;}.p_menu:hover .v_menu{ opacity: 1; top: 0;}

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

.p_menu::after{ content: “”; position: absolute; border:5px solid; border-color: transparent transparent transparent #eee; top:1em; right: 0.7em; transition: 0.5s;}.p_menu: hover:: after{ transform: scalex(-1);}

Наше меню готове можете використовувати його на своєму сайті.