右クリック風コンテキストメニュー

<div class="d03-02-03-area">右クリック領域内をクリック<br><small>お好きな位置をクリックしてください</small></div>
        <ul class="d03-02-03-menu">
          <li data-a="copy">コピー</li>
          <li data-a="edit">編集</li>
          <li data-a="dup">複製</li>
          <li class="sep"></li>
          <li data-a="del" class="danger">削除</li>
        </ul>

.d03-02-03-area{position:absolute;inset:24px;border:2px dashed #cbd5e1;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#64748b;font-size:14px;text-align:center;line-height:1.7;user-select:none;background:#f8fafc}
        .d03-02-03-area small{color:#94a3b8;font-size:12px}
        .d03-02-03-menu{position:absolute;list-style:none;margin:0;padding:6px;min-width:150px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 14px 32px rgba(30,41,59,.18);opacity:0;visibility:hidden;transform:scale(.94);transform-origin:top left;transition:opacity .14s,transform .14s;z-index:9}
        .d03-02-03-menu.open{opacity:1;visibility:visible;transform:scale(1)}
        .d03-02-03-menu li{padding:8px 12px;border-radius:7px;font-size:13.5px;color:#374151;cursor:pointer;transition:background .15s}
        .d03-02-03-menu li:hover{background:#eef2ff}
        .d03-02-03-menu li.danger{color:#dc2626}
        .d03-02-03-menu li.danger:hover{background:#fee2e2}
        .d03-02-03-menu li.sep{height:1px;padding:0;margin:4px 6px;background:#eef2f7;cursor:default}

(function(){
        var root=document.getElementById('item-03-02-03');
        var area=root.querySelector('.d03-02-03-area');
        var menu=root.querySelector('.d03-02-03-menu');
        var prev=root.querySelector('.d03-02-03');
        area.addEventListener('click',function(e){
          e.stopPropagation();
          var r=prev.getBoundingClientRect();
          var x=e.clientX-r.left,y=e.clientY-r.top;
          menu.style.left=Math.min(x,r.width-160)+'px';
          menu.style.top=Math.min(y,r.height-160)+'px';
          menu.classList.add('open');
        });
        area.addEventListener('contextmenu',function(e){e.preventDefault();area.click(e);});
        document.addEventListener('click',function(){menu.classList.remove('open');});
        menu.addEventListener('click',function(e){e.stopPropagation();if(e.target.dataset.a){menu.classList.remove('open');}});
      })();