Атрибут type тега <menu> — вигляд меню: список чи контекст

HTML

<p class="head">Чотири списки з тим самим вмістом</p>

<div class="ryad">
  <div class="stovp">
    <p class="pidpys">menu type="context"</p>
    <menu type="context"><li>Копіювати</li><li>Вставити</li><li>Видалити</li></menu>
  </div>
  <div class="stovp">
    <p class="pidpys">menu type="toolbar"</p>
    <menu type="toolbar"><li>Копіювати</li><li>Вставити</li><li>Видалити</li></menu>
  </div>
  <div class="stovp">
    <p class="pidpys">menu без type</p>
    <menu><li>Копіювати</li><li>Вставити</li><li>Видалити</li></menu>
  </div>
  <div class="stovp">
    <p class="pidpys">ul</p>
    <ul><li>Копіювати</li><li>Вставити</li><li>Видалити</li></ul>
  </div>
</div>

<p class="note">Усі чотири однакові до пікселя: маркер, відступ ліворуч, висота.
   Значення type не змінює нічого, бо переглядач про нього не знає.</p>

<p class="head">Що робити замість type="toolbar"</p>
<menu class="panel">
  <li><button type="button">Копіювати</button></li>
  <li><button type="button">Вставити</button></li>
  <li><button type="button">Видалити</button></li>
</menu>
<p class="note">Той самий menu, тільки з кнопками всередині й стилями зовні: список
   команд, який виглядає й працює як панель.</p>

<p class="head">Що робити замість type="context"</p>
<details class="vypadaje">
  <summary>Дії над файлом</summary>
  <menu>
    <li><button type="button">Перейменувати</button></li>
    <li><button type="button">Перемістити</button></li>
    <li><button type="button">Видалити</button></li>
  </menu>
</details>
<p class="note">Розкривне меню на details і summary: працює всюди, керується з
   клавіатури й нічого не потребує, крім самої розмітки.</p>

CSS

.head {
    margin: 20px 0 8px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ryad {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.stovp {
    padding: 6px;
    border: 2px dashed #b9c6d8;
    border-radius: 6px;
}

.pidpys {
    margin: 0;
    color: #1b4f9c;
    font: 13px/1.6 ui-monospace, monospace;
}

.stovp menu,
.stovp ul {
    margin: 4px 0;
}

.note {
    max-width: 620px;
    margin: 8px 0 0;
    color: #5a6472;
    font-size: .9em;
}

.panel {
    display: flex;
    gap: 6px;
    max-width: 620px;
    margin: 0;
    padding: 6px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
    list-style: none;
}

.vypadaje {
    max-width: 260px;
    padding: 6px 10px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.vypadaje summary {
    font-weight: 600;
    cursor: pointer;
}

.vypadaje menu {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.vypadaje li {
    margin: 3px 0;
}

button {
    padding: 4px 10px;
    font: inherit;
}

<menu type="context" id="mymenu">
    <menuitem label="Оновити" onclick="window.location.reload();"></menuitem>
</menu>
<div contextmenu="mymenu">Клац правою кнопкою — власних пунктів у меню не буде.</div>