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