SOURCE

var menu=document.querySelector("#smartMenu_chatRightControl"); 
var table = document.querySelectorAll('.test2').forEach(item => {
	item.oncontextmenu = function (aevent)
  {
      menu.style.cssText='display:block;top:'+aevent.clientY+'px;'+'left:'+aevent.clientX+'px;'
      return false;
  }
});


document.onclick= function(){
      menu.style.display = 'none';
}

document.querySelectorAll("a").forEach(item => {
   item.onclick = function () {
      alert(this.innerText);
			menu.style.display = 'none'
	}
})

 <ul>
    <li class="test2">士大</li>
    <li class="test1">test1</li>
    <li class="test2">士大</li>
    <li class="test1">test1</li>
    <li class="test2">士大</li>
    <li class="test1">test1</li>
    <li class="test2">士大</li>
    <li class="test1">test1</li>
  </ul>

<div id="smartMenu_chatRightControl" class="smart_menu_box">
  <div class="smart_menu_body">
    <ul class="smart_menu_ul">
      <li class="smart_menu_li">
        <a href="javascript:" class="smart_menu_a" data-key="09713760724105638">
          菜单1
        </a>
      </li>
      <li class="smart_menu_li">
        <a href="javascript:" class="smart_menu_a" data-key="05626681397203712">
          菜单2
        </a>
      </li>
    </ul>
  </div>
</div>

html,
body {
  height: 100%;
}


/* smartMenu.css	by zhangxinxu */

.smart_menu_box {
  display: none;
  width: 300px;
  position: absolute;
  z-index: 201105;
}

.smart_menu_body {
  padding: 1px;
  border: 1px solid #B8CBCB;
  background-color: #fff;
  -moz-box-shadow: 2px 2px 5px #666;
  -webkit-box-shadow: 2px 2px 5px #666;
  box-shadow: 2px 2px 5px #666;
}

.smart_menu_ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.smart_menu_li {
  position: relative;
}

.smart_menu_a {
  display: block;
  height: 25px;
  line-height: 24px;
  padding: 0 5px 0 25px;
  color: #000;
  font-size: 12px;
  text-decoration: none;
  overflow: hidden;
}

.smart_menu_a:hover,
.smart_menu_a_hover {
  background-color: #348CCC;
  color: #fff;
  text-decoration: none;
}

.smart_menu_li_separate {
  line-height: 0;
  margin: 3px;
  border-bottom: 1px solid #B8CBCB;
  font-size: 0;
}

.smart_menu_triangle {
  width: 0;
  height: 0;
  border: 5px dashed transparent;
  border-left: 5px solid #666;
  overflow: hidden;
  position: absolute;
  top: 7px;
  right: 5px;
}

.smart_menu_a:hover .smart_menu_triangle,
.smart_menu_a_hover .smart_menu_triangle {
  border-left-color: #fff;
}

.smart_menu_li_hover .smart_menu_box {
  top: -1px;
  left: 130px;
}

.smart_menu_li:first-child a,
.smart_menu_li:nth-child(2) a,
.smart_menu_li:nth-child(3) a,
.smart_menu_li:nth-child(4) a {
  cursor: default;
}