Вот мы и добрались до самого сложного. Меню в которых 3 и больше уровней. Я надеюсь, вы прочитали предыдущие статьи, тогда этот материал Вам покажется простым. И так, наша цель, чтобы 3 и следующие уровни располагались справа от пункта меню.

В статье Все статьи

Многоуровневое меню
(example_1::github)

HTML

Для этого нам всего лишь надо

  1. Присвоить свойства top:0; left:100% для всех подменю, начиная с 3 уровня (.menu_top ul ul ul)
  2. Задать отсчет для left, обычно это родительский элемент li (.menu_top ul li)

И все. Просто ?

CSS

Горизонтальные подменю
(example_2::github)

Раз уж у нас все так легко и просто получается. Давайте еще сделаем так, чтобы подменю располагались не в столбик, а в строку

Сразу приведу код

CSS

Заметили отличия?

  1. .menu_top > ul li – теперь все меню располагаются горизонтально (раньше только 1-ый уровень)
  2. top: 100%; и left: 0; – оступаем от верха на 100% и прижимаемся к левому краю (раньше top: 0; left: 100%)
  3. .menu_top ul { position:relative} – отсчет для left и top (раньше мы считали от .menu_top ul li)
  4. width: 100% – ширина на все меню 1-го уровня

Не скажу что это самый красивый вариант присвоение стилей (можно поиграться с left, top и position:relative, чтобы менять точку отсчета), по крайней мере этот вариант рабочий 🙂

Тоже самое на flexbox
(example_3::github)

CSS

Обратите внимание на использование visibility (вместо display) и на то что width мы в этот раз не задаем.

 

Подведем предварительный итог. Для того чтобы создать многоуровневое горизонтально меню нужно

  1. Делаем первый уровень меню. Оно обязательно горизонтальное.
    1. float:left
    2. display:inline
    3. display:inline-block
    4. flexbox
  2. Решаем как мы хотим чтобы выглядели остальные уровни
    1. Тоже горизонтальные. Тогда продолжаем выстраивать их в одну линию и следим за началом отсчета
    2. Вертильные. У каждого свои преимущества и недостатки
      1. left:-9999px
      2. display:none
      3. visible:hidden [opacity:0]