Focus is shifting to a button when a div is clicked

I am showing a menu when the user clicks on a div. If the user clicks somewhere else on the page , I am hiding the menu. I am also hiding the menu on mouseleve of menu.

The problem is once the menu is hidden then clicking on the 'show' div does not show it. when i click the div again the menu shows. Why is that happening? I suspect the focus is shifting to a button control on the page when I am clicking somewhere else on the page. I am not sure if this is the reason behind it. Please help.

Here is the sample code:

 $(document).ready(function() {
    BindEvents();
});

function BindEvents()
 {
    $('#show').toggle(function() {
    var pEI = $("#show");
    var pTV = $("#menu");
    var position = pEI.position();

    var height = $("#show").height();

    $("#menu").css({ "left": (position.left) + "px", "top": (position.top +开发者_如何学Python height) + "px" });
    $("#menu").show("slow");

}, function() {
$("#menu").hide("slow");

});

$(document).click(function() {

    $("#menu").hide("slow");
});

$('#menu').mouseleave(function() {

    $("#menu").hide();
});
}


<table>
<tr>
<div id="show"></div>
</tr>
<tr>
<asp:button></asp:button>
</tr>
<tr>
<div id="menu"></div>
</tr>

---

The problem is because of your use of 'toggle'. On first click the toggle method displays the menu and on the second click it hides it (already hidden due to mouse out or click somewhere else..). You should be using '.click' instead of toggle there.. That should do it..