Для начала создадим разметку 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>