JSFiddle - React, Tailwind, and code Playground

HTML

<div id="treeview">
  <ul id='browser' class='filetree'>
    <li class='closed'><span class='folder' id='rightclickarea'>HP_MMGLOW</span>
      <div class='vmenu'>
        <div class='first_li'><span>Add new module</span></div>
        <div class='first_li'><span>Add new item</span></div>
        <div class='first_li'><span>Remove module</span></div>
      </div>
    </li>
      
    <li class='closed'><span class='folder' id='rightclickarea'>HP_MMGMID</span>
      <div class='vmenu'>
        <div class='first_li'><span>Add new module</span></div>
        <div class='first_li'><span>Add new item</span></div>
        <div class='first_li'><span>Remove module with all its submodules</span></div>
      </div>
    </li>
    
    <li class='closed'><span class='folder' id='rightclickarea'>IBM_PPSMID</span>
      <div class='vmenu'>
        <div class='first_li'><span>Add new module</span></div>
        <div class='first_li'><span>Add new item</span></div>
        <div class='first_li'><span>Remove module</span></div>
      </div>
    </li>
  </ul>
</div>

CSS

/* jQuery right click menu CSS*/
        .vmenu{
            border:1px solid #aaa;
            position:absolute;
            background:#fff;    
            display:none;
            font-size:0.9em;
        }
           .vmenu .first_li span{
               width:200px;
               display:block;
               padding:5px 10px;
               cursor:pointer;
           }
           .vmenu .inner_li{
               display:none;
               margin-left:120px;
               position:absolute;
               border:1px solid #aaa;
            border-left:1px solid #ccc;
            margin-top:-28px;
            background:#fff;
        }
           .vmenu .sep_li{
               border-top: 1px ridge #aaa;
               margin:5px 0;
           }
           .vmenu .fill_title{
               font-size:11px;
               font-weight:bold;
               height:15px;
               overflow:hidden;
               word-wrap:break-word;
           }

JavaScript

$(document).ready(function(){
 
            $('#rightclickarea').bind('contextmenu',function(e) {
            var $cmenu = $(this).next();
            $('<div class="overlay"></div>').css({left : '0px', top : '0px',position: 'absolute', width:'100%', height: '100%', zIndex: '100' }).click(function() {
                $(this).remove();
                $cmenu.hide();
            }).bind('contextmenu' , function(){return false;}).appendTo(document.body);
            
            $(this).next().css({ left: e.pageX, top: e.pageY, zIndex: '101' }).show();
                return false;
            });
 
            $('.vmenu .first_li').live('click',function() {
                if( $(this).children().size() == 1 ) {
                    alert($(this).children().text());
                    $('.vmenu').hide();
                    $('.overlay').hide();
                }
             });
 
             $('.vmenu .inner_li span').live('click',function() {
                alert($(this).text());
                $('.vmenu').hide();
                $('.overlay').hide();
             });
 
            $(".first_li , .sec_li, .inner_li span").hover(function () {
                $(this).css({backgroundColor : '#E0EDFE' , cursor : 'pointer'});
                
                if ( $(this).children().size() >0 )
                        $(this).find('.inner_li').show();    
                        $(this).css({cursor : 'default'});
                }, 
                function () {
                    $(this).css('background-color' , '#fff' );
                    $(this).find('.inner_li').hide();
                });
        });