Для початку створимо розмітку 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;
}

Відкрити рішення в пісочниці.