JQuery contextmenu show/hide problems
<p>I'm working on my admin panel, the mail system section and I am finding inspiration from Outlook.com. I have added three custom right-click hijack menus alike Outlook;</p>

<ol>
<li>Right-Click Mail Nav First-Tier</li>
<li>Right-Click Mail Nav Second-Tier</li>
<li>Right-Click Message List</li>
</ol>

<p>For the right-clicking of the message list, the last visible option I am trying to make it so that upon clicking ("DropMenu") the four additional options show ("ForThisSenderMore") keeping it so that click elsewhere will remove the menu unless you click on "Title" or "DropMenu".</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// Trigger action when the contexmenu is about to be shown
$('ul.inbox-nav &gt; li &gt; a').bind("contextmenu", function(event) {

  event.preventDefault();
  $("#MailMenuFirstTier").finish().toggle(100).

  css({
    top: event.pageY + "px",
    left: event.pageX + "px"
  });
});
$('ul.inbox-nav &gt; li &gt; ul &gt; li a').bind("contextmenu", function(event) {

  event.preventDefault();
  $("#MailMenuSecondTier").finish().toggle(100).

  css({
    top: event.pageY + "px",
    left: event.pageX + "px"
  });
});
$('.table&gt;tbody&gt;tr&gt;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 &gt; li &gt; a').bind("mousedown", function(e) {
  if (!$(e.target).parents(".custom-menu").length &gt; 0) {
    $("#MailMenuFirstTier").hide(100);
  }
});
$('ul.inbox-nav &gt; li &gt; ul &gt; li').bind("mousedown", function(e) {
  if (!$(e.target).parents(".custom-menu").length &gt; 0) {
    $("#MailMenuSecondTier").hide(100);
  }
});
$('.table&gt;tbody&gt;tr&gt;td').bind("mousedown", function(e) {
  if (!$(e.target).parents(".custom-menu").length &gt; 0) {
    $("#MailBodyList").hide(100);
  }
});

jQuery(document).click(function(event) {
  if (jQuery(event.target).closest('ul.inbox-nav &gt; li &gt; a').length === 0) {
    jQuery('#MailMenuFirstTier').hide();
  }
  if (jQuery(event.target).closest('ul.inbox-nav &gt; li &gt; ul &gt; li a').length === 0) {
    jQuery('#MailMenuSecondTier').hide();
  }
  if (jQuery(event.target).closest('.table&gt;tbody&gt;tr&gt;td').length === 0) {
    jQuery('#MailBodyList').hide();
  }
});
jQuery(document).on("contextmenu", function(e) {
  if (jQuery(event.target).closest('ul.inbox-nav &gt; li &gt; a').length === 0) {
    $('#MailMenuFirstTier').hide();
  }
  if (jQuery(event.target).closest('ul.inbox-nav &gt; li &gt; ul &gt; li a').length === 0) {
    $('#MailMenuSecondTier').hide();
  }
  if (jQuery(event.target).closest('.table&gt;tbody&gt;tr&gt;td').length === 0) {
    $('#MailBodyList').hide();
  }
});

$("#MailBodyList .DropMenu").click(function(e) {
  $('.ForThisSenderMore').show();
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;table class="table"&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Right click me&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

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