Right click on SVG - solution

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table class="table">
  <tbody>
    <tr>
      <td>Right click me</td>
    </tr>
  </tbody>
</table>

<ul class="custom-menu" id="MailMenuFirstTier">
  <li>New Sub-Folder</li>
  <li>Mark All As Read</li>
  <li>Empty Folder</li>
</ul>
<ul class="custom-menu" id="MailMenuSecondTier">
  <li>New Sub-Folder</li>
  <li>Rename</li>
  <li>Delete</li>
  <li>Mark All As Read</li>
  <li>Empty Folder</li>
</ul>
<ul class="custom-menu" id="MailBodyList">
  <li class="Title">For This Message</li>
  <li>Reply</li>
  <li>Reply All</li>
  <li>Forward</li>
  <div class="divider"></div>
  <li>Mark As unread</li>
  <li>Delete</li>
  <li>Archive</li>
  <li>Junk</li>
  <li>Move</li>
  <li>Create Rule</li>
  <li>Save To BananzaCloud</li>
  <li>View Message Source</li>
  <div class="divider"></div>
  <li class="DropMenu">For This Sender</li>
  <li class="ForThisSenderMore">Send Email</li>
  <li class="ForThisSenderMore">Find Email</li>
  <li class="ForThisSenderMore">Move All Emails From...</li>
  <li class="ForThisSenderMore">Delete All From...</li>
</ul>

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

$("#ddd").bind("contextmenu", function(event) {

     // Avoid the real one
     event.preventDefault();

     // Show contextmenu
     $("#container-menu").finish().toggle(100). // In the right position (the mouse)
     css({
       top: event.pageY + "px",
       left: event.pageX + "px"
     });
   });
   // If the document is clicked somewhere
   $(document).bind("mousedown", function(e) {

     // If the clicked element is not the menu
     if (!$(e.target).parents(".custom-menu").length > 0) {

       // Hide it
       $(".custom-menu").hide(100);
     }
   });


   // If the menu element is clicked
   $("#container-menu li").click(function() {
     // This is the triggered action name
     switch ($(this).attr("data-action")) {

       // A case for each action. Your actions here
       case "load":
         $(".file-select").trigger("click");
         break;
       case "clear":
         alert("second");
         break;
     }

     // Hide it AFTER the action was triggered
     $(".custom-menu").hide(100);
   });