Для начала создадим разметку HTML/CSS нашего меню.

Меню – это отдельный графический компонент на странице, так что его лучше вынести в отдельный DOM-элемент.

Список пунктов меню может быть представлен в виде списка ul/li.

Пример HTML-структуры:

<div class="menu"> <span class="title">Сладости (нажми меня)!</span> <ul> <li>Пирожное</li> <li>Пончик</li> <li>Мёд</li> </ul> </div>

Для заголовка мы используем тег <span>, потому что <div>, как и любой блочный элемент, имеет скрытое свойство display:block, а значит, занимает ширину 100%.

Например:

<div style="border: solid red 1px" onclick="alert(1)">Сладости (нажми меня)!</div>

Таким образом, если мы зададим обработчик события onclick, то он будет срабатывать по клику на всей ширине поля.

…тег <span> – строчный элемент, по умолчанию имеет свойство display: inline, который занимает ровно столько места, сколько занимает сам текст:

<span style="border: solid red 1px" onclick="alert(1)">Сладости (нажми меня)!</span>

Переключение меню должно менять стрелку и скрывать или показывать список элементов меню.

Все эти изменения прекрасно обрабатываются средствами CSS. Посредством JavaScript мы будем отмечать текущее состояние меню, добавляя или удаляя класс .open.

Без класса .open меню будет закрыто:

.menu ul { margin: 0; list-style: none; padding-left: 20px; display: none; } .menu .title::before { content: '▶ '; font-size: 80%; color: green; }

…А с ним (с классом .open) стрелка будет меняться, и список будет показываться:

.menu.open .title::before { content: '▼ '; } .menu.open ul { display: block; }

Открыть решение в песочнице.