JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="inbox-nav">
    <li class="active">
        <a href="javascript:;" data-type="inbox" data-title="Inbox">
            <div class="Arrow"></div> Inbox
        </a>
        <ul>
        <li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 1</a></li>
        <li><a href="javascript:;" data-type="inbox" data-title="Sub_2">Sub-Folder 2</a></li>
        <li>
            <a href="javascript:;" data-type="inbox" data-title="Sub_3">Sub-Folder 3</a>
            <ul>
                <li><a href="javascript:;" data-type="inbox" data-title="Sub_1">Sub-Folder 1</a></li>
                <li><a href="javascript:;" data-type="inbox" data-title="Sub_2">Sub-Folder 2</a></li>
            </ul>
        </li>
        <li><a href="javascript:;" data-type="inbox" data-title="Sub_4">Sub-Folder 4</a></li>
        <li><a href="javascript:;" data-type="inbox" data-title="Sub_5">Sub-Folder 5</a></li>
        </ul>
    </li>
    <li>
        <a href="javascript:;" data-type="important" data-title="Inbox"> Important </a>
    </li>
    <li>
        <a href="javascript:;" data-type="sent" data-title="Sent"> Sent </a>
    </li>
    <li>
        <a href="javascript:;" data-type="draft" data-title="Draft"> Draft
            <span class="badge badge-danger">8</span>
        </a>
    </li>
    <li>
        <a href="javascript:;" class="sbold uppercase" data-title="Trash"> Trash
            <span class="badge badge-info">23</span>
        </a>
    </li>
    <li>
        <a href="javascript:;" data-type="inbox" data-title="Promotions"> Promotions
            <span class="badge badge-warning">2</span>
        </a>
    </li>
    <li>
        <a href="javascript:;" data-type="inbox" data-title="News"> News </a>
    </li>
</ul>
<ul class="custom-menu" id="MailMenuFirstTier">
  <li>Mark All As Read</li>
  <li>Empty Folder</li>
</ul>
<ul class="custom-menu" id="MailMenuSecondTier">
  <li class="NewSubFolder">New Sub-Folder</li>
  <li class="Rename">Rename</li>
  <li...

CSS

.custom-menu {
    display: none;
    z-index: 1000;
    position: absolute;
	margin:0;
	padding:0;	
	list-style:none;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    border-radius: 5px;
	font-size:12px;
}

.custom-menu li {
    padding: 8px 12px;
    cursor: pointer;
}

.custom-menu li:hover {
    background-color: #DEF;
}
.custom-menu .divider {
	content:" ";
	height:1px;
	margin:4px 10px;
	background:#929292;
}
#MailBodyList.custom-menu li.Title {
	color:#929292;
}
#MailBodyList.custom-menu li.Title:hover {
	background: #FFF;
	cursor:default;
}
#MailBodyList.custom-menu li.ForThisSenderMore {
	display:none;
}

JavaScript

$(document).ready(function() {
	
	// Trigger action when the contexmenu is about to be shown
	$('ul.inbox-nav > li > a').bind("contextmenu", function (event) {

		event.preventDefault();
		$("#MailMenuFirstTier").finish().toggle(100).
	
		css({
			top: event.pageY + "px",
			left: event.pageX + "px"
		});
	});
	$('ul.inbox-nav > li > ul > li a').bind("contextmenu", function (event) {
		event.stopPropagation();
		event.preventDefault();
		$(this).parent().addClass('Clicked');
		$("#MailMenuSecondTier").finish().toggle(100).
	
		css({
			top: event.pageY + "px",
			left: event.pageX + "px"
		});
	});
	$('.table>tbody>tr>td').bind("contextmenu", function (event) {
	
		event.preventDefault();
		$("#MailBodyList").finish().toggle(100).
	
		css({
			top: event.pageY + "px",
			left: event.pageX + "px"
		});
	});
	
	
	// If the Element is clicked somewhere
	$('ul.inbox-nav > li > a').bind("mousedown", function (e) {
		if (!$(e.target).parents(".custom-menu").length > 0) {
			$("#MailMenuFirstTier").hide(100);
		}
	});
	$('ul.inbox-nav > li > ul > li').bind("mousedown", function (e) {
		if (!$(e.target).parents(".custom-menu").length > 0) {
			$("#MailMenuSecondTier").hide(100);
		}
	});
	$('.table>tbody>tr>td').bind("mousedown", function (e) {
		if (!$(e.target).parents(".custom-menu").length > 0) {
			$("#MailBodyList").hide(100);
		}
	});
	
	jQuery(document).click(function(event) {
		if (jQuery(event.target).closest('ul.inbox-nav > li > a').length === 0) {
			jQuery('#MailMenuFirstTier').hide();
		}
		if (jQuery(event.target).closest('ul.inbox-nav > li > ul > li a').length === 0) {
			jQuery('#MailMenuSecondTier').hide();
		}
		if (jQuery(event.target).closest('.table>tbody>tr>td').length === 0) {
			jQuery('#MailBodyList').hide();
		}
	});
	jQuery(document).on("contextmenu",function(e){
		if (jQuery(event.target).closest('ul.inbox-nav > li > a').length === 0) {
			$('#MailMenuFirstTier').hide();
		}
		if (jQuery(event.target).closest('ul.inbox-nav > li > ul > li...