Per prima cosa creiamo l’HTML ed il CSS.

Un menù è un componente grafico indipendente nella pagina, quindi è bene inserirlo all’interno di un singolo elemento genitore del DOM.

Una lista di elementi del menù può essere rappresentata da una lista di ul/li.

Ecco la struttura d’esempio:

<div class="menu">
  <span class="title">Dolciumi (cliccami)!</span>
  <ul>
    <li>Torte</li>
    <li>Ciambelle</li>
    <li>Miele</li>
  </ul>
</div>

Usiamo <span> per il titolo perché <div>, avendo un display:block implicito, occuperebbe il 100% della larghezza disponibile.

<div style="border: solid red 1px" onclick="alert(1)">Dolciumi (cliccami)!</div>

Impostando un onclick su di esso, intercetterà i click alla destra del testo.

Dato che <span> ha un display: inline implicito, occupa esattamente lo spazio necessario per la visualizzazione del testo:

<span style="border: solid red 1px" onclick="alert(1)">Dolciumi (cliccami)!</span>