Атрибут label тега <menu> — підпис контекстного підменю

HTML

<div class="pair">
    <div>
        <p class="cap">&lt;menu label="Файл"&gt;</p>
        <menu label="Файл">
            <li>Відкрити</li>
            <li>Зберегти</li>
        </menu>
    </div>
    <div>
        <p class="cap">&lt;ul&gt; без жодних атрибутів</p>
        <ul>
            <li>Відкрити</li>
            <li>Зберегти</li>
        </ul>
    </div>
</div>

<p class="note">Напису «Файл» немає ніде: атрибут не малюється, а сам
    &lt;menu&gt; виглядає рівно як &lt;ul&gt;.</p>

<p class="cap">А ось label, який справді працює — у групі пунктів списку:</p>
<select>
    <option value="">Оберіть місто</option>
    <optgroup label="Україна">
        <option>Київ</option>
        <option>Львів</option>
    </optgroup>
    <optgroup label="Польща">
        <option>Варшава</option>
    </optgroup>
</select>

<p class="cap">І робоча назва меню — видимим заголовком поруч:</p>
<nav aria-label="Головне меню">
    <h3 class="nav-title">Головне меню</h3>
    <menu>
        <li><a href="#dovidnyk">Довідник</a></li>
        <li><a href="#statti">Статті</a></li>
    </menu>
</nav>

CSS

.pair {
    display: flex;
    gap: 24px;
    margin-bottom: 4px;
}

.cap {
    margin: 14px 0 4px;
    color: #5a6472;
    font-family: ui-monospace, monospace;
    font-size: .9em;
}

menu,
ul {
    margin: 0;
    padding: 6px 6px 6px 28px;
    border: 2px dashed #b9c6d8;
    background: #f6f9ff;
}

.note {
    max-width: 520px;
    margin: 6px 0 0;
    color: #c0392b;
    font-size: .9em;
}

select {
    padding: 5px;
    font: inherit;
}

.nav-title {
    margin: 0 0 6px;
    font-size: 1em;
}

nav menu {
    list-style: none;
    padding-left: 10px;
}

HTML

<p>Приклад використання тегу <code>menu</code></p>
 <p><strong>Програма фільмів на сьогодні:</strong></p>
  <menu label="proggram">
   <li>Хеллбой</li>
   <li>Я легенда</li>
   <li>На висоті</li>
   <li>Гол</li>
   <li>Тренер</li>
  </menu>

CSS

menu {
  font-size:20px;
  font-style: oblique;
}