컨텍스트 메뉴

<div class="cmw">
  <div class="cmtarget" id="cmt">여기를 마우스 오른쪽 버튼으로 눌러보세요<br><span class="hint">(우클릭)</span></div>
  <ul class="cmenu" id="cmenu" role="menu" aria-label="항목 메뉴">
    <li role="menuitem" tabindex="-1">이름 변경</li>
    <li role="menuitem" tabindex="-1">복제</li>
    <li role="menuitem" tabindex="-1" class="danger">삭제</li>
  </ul>
</div>

.cmw{position:absolute;inset:0}
.cmtarget{position:absolute;inset:14px;border:1px dashed var(--line);border-radius:10px;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:11px;line-height:1.5}
.hint{color:var(--accent);font-weight:600}
.cmenu{position:absolute;list-style:none;margin:0;padding:5px;width:120px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 30px rgba(0,0,0,.22);opacity:0;pointer-events:none;transform:scale(.94);transition:opacity .15s,transform .15s}
.cmenu[data-open]{opacity:1;pointer-events:auto;transform:scale(1)}
.cmenu li{padding:7px 9px;border-radius:6px;font-size:11px;color:var(--fg);cursor:default}
.cmenu li[data-hi]{background:var(--accent);color:#fff}
.cmenu li.danger{color:#e5484d}
.cmenu li.danger[data-hi]{background:#e5484d;color:#fff}

const t = document.getElementById('cmt'), menu = document.getElementById('cmenu');
const items = [...menu.querySelectorAll('li')];
function openAt(x, y) { menu.style.left = x + 'px'; menu.style.top = y + 'px'; menu.setAttribute('data-open', ''); }
function close() { menu.removeAttribute('data-open'); items.forEach((i) => i.removeAttribute('data-hi')); }
t.addEventListener('contextmenu', (e) => { e.preventDefault(); auto = false; openAt(e.offsetX, e.offsetY); });
document.addEventListener('click', (e) => { if (!menu.contains(e.target)) close(); });
let auto = true;
function loop() {
  if (!auto) return;
  openAt(60, 66);
  let i = 0;
  const hi = setInterval(() => {
    if (!auto) return clearInterval(hi);
    items.forEach((it, idx) => it.toggleAttribute('data-hi', idx === i));
    i++;
    if (i > items.length) { clearInterval(hi); setTimeout(() => { if (auto) { close(); setTimeout(loop, 900); } }, 300); }
  }, 380);
}
setTimeout(loop, 500);