В некоторых онлайн конструкторах сайтов на определенных тарифах очень ограничен функционал (например — Битрикс24). Бывает нет возможности вставить свой JavaScript-код, а так же поменять HTML-код готовых блоков. Такая политика в общем то не удивительна, надо же как-то монетизировать такие продукты.

Что если все же хочется выпадающее меню на сайте, а базовые модули с таким функционалом не доступны. Попробуем сделать чисто на CSS. Бывает, что его добавлять как раз разрешают.

Итак пример структуры одноуровневого меню, которое будем превращать в двухуровневое:

1
2
3
4
5
6
7
8
9

<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Four</li>
<li>Five</li>
<li>Sub el 1</li>
<li>Sub el 2</li>
</ul>

И CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

ul {
  word-spacing: -.36em;
  display: table;
  position: relative;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  padding: 10px;
  word-spacing: normal;
  height: 20px;
  width: 80px;
  background: gray;
}
 
ul:hover li {
  display: inline-block;
}
 
li:nth-child(6),
li:nth-child(7) {
  display: none;
  position: absolute;
  left: 200px;
  background: lightgray;
}
li:nth-child(6) {
  top: 40px;
}
li:nth-child(7) {
  top: 80px;
}
li:nth-child(1):hover ~ li:nth-child(6),
li:nth-child(2):hover ~ li:nth-child(6),
li:nth-child(4):hover ~ li:nth-child(6),
li:nth-child(5):hover ~ li:nth-child(6),
li:nth-child(1):hover ~ li:nth-child(7),
li:nth-child(2):hover ~ li:nth-child(7),
li:nth-child(4):hover ~ li:nth-child(7),
li:nth-child(5):hover ~ li:nth-child(7) {
  display: none;
}

Вот что у нас получилось:

• First
• Second
• Third
• Four
• Five
• Sub el 1
• Sub el 2

Как видно, выпадающие пункты меню размещены в конце, иначе начинаются проблемы при отображении. Некоторый CSS-код относится к решению проблемы отступов между элементами типа inline-block (В частности word-spacing и display: table у UL). Неудобство, конечно, еще в том что все отступы пунктов выпадающего меню придется прописывать вручную. А для разных разрешений экрана, по видимому, их надо будет настраивать с помощью медиа-запросов CSS.

Но суть в том, что все же есть техническая возможность сделать выпадающее меню для клиентов, которые пока не готовы платить дополнительный ежемесячный взнос за расширенный функционал онлайн-конструктора.