JS 마우스 우 클릭 으로 사용자 정의 목록

<div id="menu">
    <a href="javascript:;">a</a>
    <a href="javascript:;">b</a>
    <a href="javascript:;">c</a>
    <a href="javascript:;">d</a>
</div>

#menu{
        background-color: #fff;
        width: 300px; 
        box-shadow: 0 1px 20px #eeeeee,1px 0 20px #eeeeee;
        position: absolute;
        z-index: 99999;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        overflow: hidden;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    #menu a{
        display: block;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        text-decoration:none;
        font-size: 14px;
        color: #4c4c4c;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    #menu a:hover{
        background-color:#eeeeee;
    }

window.oncontextmenu = function (e) {
    var e = event || window.event;
    //           
    e.preventDefault();
    //         
    let menu = document.getElementById('menu');

    //              ，    
    menu.style.left = e.clientX + 'px';
    menu.style.top = e.pageY + 'px';
    
    //         。    
        menu.style.display = 'block';
}

//close    
window.onclick = function (e) {
    //  click      
    document.getElementById('menu').style.display = "none";
}