onMouseOut Event is not working in my HTML

I have this code in my page.

  <div class="MenuItemContainer">
                <a href="javascript:ShowHelpMenu()">
                    <div class="MenuItemContent">
                        <div>
                            <img src="/Content/TopMenu/Icons/Help.png" alt="Help" />
                        </div>
                        <div>
                            Help
                        </div>
                        <div id="divHelpMenu" class="HelpMenu开发者_运维百科DisplayDiv" style="z-index:9999; width: 400px;margin: 10px 20px; background-color:Aqua" onmouseout="HideHelpMenu()">
                        <%=Session["helpUrls"]%> 
                       <%-- <%=Session["Links"]%> 
                       --%>
                        </div>
                </div>

This is my Functions

function ShowHelpMenu() {
$("#divHelpMenu").css("display","block");
}
function HideHelpMenu() {
$("#divHelpMenu").css("display","none");
}

When I click on Help Link I can display all the Links but when I mouseover on the links my Div tag is closing. onmouseout event is not firing when I mouse out from the div tag.

its closing when I mouse in on HTML links.

Thanks

It looks like you have your mouse out code on the wrong element, I think you'd want it on the MenuItemContainer div. You could also remove your inline mouse out code and bind the event to the correct container when you show the help div, like this:

function ShowHelpMenu() {
    $("#divHelpMenu").css("display","block");
    $('#MenuItemContainer').bind('mouseout.helpmenu', HideHelpMenu);
}
function HideHelpMenu() {
    $("#divHelpMenu").css("display","none");
    $('#MenuItemContainer').unbind('mouseout.helpmenu');
}

You missing some closing tags. Try next HTML markup:

<div class="MenuItemContainer">
  <a href="#" onclick="javascript:ShowHelpMenu();return false;">
    <div class="MenuItemContent">
      <div><img src="/Content/TopMenu/Icons/Help.png" alt="Help" /></div>
        <div>Help</div>
    </div>
  </a><br/>
  <div id="divHelpMenu" class="HelpMenuDisplayDiv" 
    style="display:none;z-index:9999; width: 400px;margin: 10px 20px; background-color:Aqua" 
    onmouseout="HideHelpMenu()">
        Link1<br/>
        Link2<br/>
        Link3<br/>
        Link4<br/>
        Link5<br/>
        Link6<br/>
  </div>
</div>

I got it working,

$(document).ready(function () {
    $('#divHelpMenu').hover(function () {
        $("#divHelpMenu").css("display", "block");
    }, function () {
        $("#divHelpMenu").css("display", "none");
    });
});