I created a simple HoverMenuExtender.  When the cursor moves over TargetControID ImageButton the panel pops up.  But it does not cover up what is behind it.  The area of the panel is a combination of what is in the panel and what is behind it.  The background color is that of the CSS background-color for the panel.

How can you make a HoverMenuExtender panel cover up what is behind it completely?
 

<div class="divHelp">
    <asp:ImageButton ID="ibtnHelp" runat="server" CssClass="ibtnHelp" ImageUrl="~/Images/QuestionMark3.jpg"
        ToolTip="Help me with this page." />
    <asp:Label ID="lblHelp" runat="server" CssClass="lblHelp" Text="Help"></asp:Label>

    <asp:Panel ID="pnlHelp" runat="server" CssClass="pnlHelp" BackColor="AliceBlue">
        <asp:Label ID="lblHelpText" runat="server" CssClass="lblHelpText"
        Text="This is a test. This is a test. This is a test. "></asp:Label>
    </asp:Panel>

    <cc1:HoverMenuExtender ID="hmeHelp" runat="server" TargetControlID="ibtnHelp" PopupControlID="pnlHelp"
        HoverDelay="25" PopupPosition="Bottom" OffsetX="20" >
    </cc1:HoverMenuExtender>
</div>

I solved the problem. 

The problem occurs when the CSS for the div that surrounds the HoverMenuExtender and related controls contains position: relative and when there is no z-index declaration for the CSS for the panel. 

Solution:  The HoverMenuExtender acted properly when I removed position: relative for the CSS rule for the div and when I added a z-index with a very high value to the CSS rule for the panel.

I didn't have to remove position:relative for the div when I moved the HoverMenuExtender and the panel out of the div that contains position: relative.
 

<div class="divHelp">
    <asp:ImageButton ID="ibtnHelp" runat="server" CssClass="ibtnHelp" ImageUrl="~/Images/QuestionMark3.jpg"
        ToolTip="Help me with this page." />
    <asp:Label ID="lblHelp" runat="server" CssClass="lblHelp" Text="Help"></asp:Label>
</div>

<asp:Panel ID="pnlHelp" runat="server" CssClass="pnlHelp">
    <asp:Label ID="lblHelpText" runat="server" CssClass="lblHelpText" 
	Text="This is a test. This is a test. This is a test. "></asp:Label>
</asp:Panel>
<cc1:HoverMenuExtender ID="hmeHelp" runat="server" TargetControlID="ibtnHelp" PopupControlID="pnlHelp"
    HoverDelay="25" PopupPosition="Bottom" OffsetX="20" HoverCssClass="modalBackground">
</cc1:HoverMenuExtender> 

.divHelp
{
    position: relative;
    top: 0em;
    padding: 0.5em;
}

.pnlHelp
{
    height: 6em;
    width: 20em;
    background-color: #FFFFC1;
    padding: 1em;
    border-color: Gray;
    border-style: solid;
    border-width: 0.2em;
    z-index: 900000;
}

I don't have an explanation of why these CSS property values cause the HoverMenExtender to show what is beneath the panel.  Can anyone offer an explanation for this behavior or is it possibly an AJAX bug?

After additional testing I found another requirement.  

The panel will display in front of all other controls if the CSS rule for the div that surrounds the panel has a very high z-index value and the CSS rule for the panel that pops-up has a z-index value even higher than that.

<div class="divRight-NewUsers">
    <asp:Label ID="lblNewUsers" runat="server"
        CssClass="lblNewUsers" Text="New Members"></asp:Label>
          
    <asp:ImageButton ID="ibtnHelpPopup_NewUsers" runat="server"
        CssClass="ibtnHelpPopup_NewUsers"
        ImageUrl="~/Images/QuestionMark3.jpg" />
    
    <asp:Panel ID="pnlHelpPopup_NewUsers" runat="server"
        CssClass="pnlHelpPopup_NewUsers"
        Style="display: none;">
    <asp:Label ID="lblHelpPopupText_NewUsers" runat="server"
         CssClass="lblHelpPopupText_NewUsers"
         Text=""></asp:Label>
    </asp:Panel>

    <cc1:HoverMenuExtender ID="hmeHelp" runat="server"
    	   TargetControlID="ibtnHelpPopup_NewUsers"
         PopupControlID="pnlHelpPopup_NewUsers" 
	   HoverDelay="25" PopupPosition="Left" OffsetX="-20" >
    </cc1:HoverMenuExtender>
</div>

.divRight-NewUsers
{
    position: absolute;
    top: 7em;
    left: 34em;
    height: auto;
    width: 20em;
    text-align: left;
    padding: 1em;
    font-family: Verdana Arial;
    background-color: #E0EDF5;
    z-index: 9800000;
}
.pnlHelpPopup_NewUsers
{
    height: 12em;
    width: 22em;
    background-color: #FFFFC1;
    padding: 1em;
    border-color: Gray;
    border-style: solid;
    border-width: 0.2em;
    z-index: 9800001;
}

 And yet another requirement if you use MasterPages.  The panel targeted by the HoverMenuExtender covers everything in the area used by the ContentPlaceHolder in which it is placed.  The popup panel looks transparent.  But any part of the panel that displays outside of its home ContentPlaceHolder will show the contents of the web content in addition to the panel.  You can see everything and nothing is covered up, so it looks like a jumbled mess.

My solution was to create another ContentPlaceHolder in the MasterPage.  It is higher up in the DOM hierarchy than the other ContentPlaceHolders.

This is necessary in IE7.  (I haven't tested it in IE6, but it is probably also necessary.)  However, popups display correctly over all ContentPlaceHolders in IE8 without this work-around.

Example:  This is in the MasterPage.  In IE7, any popup placed within bodyAllContentPlaceHolder will display above anything in all of the other ContentPlaceHolders as it should.

<div class="bodyMainLeft">
    <div class="bodyMainRight">
        <asp:ContentPlaceHolder ID="bodyAllContentPlaceHolder" runat="server">
        </asp:ContentPlaceHolder>
        <div class="bodyLeft">
            <asp:ContentPlaceHolder ID="bodyLeftContentPlaceHolder" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="bodyRight">
            <asp:ContentPlaceHolder ID="bodyRightContentPlaceHolder" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="bodyContent">
            <asp:ContentPlaceHolder ID="bodyContentPlaceHolder" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="clearone">
             </div>
    </div>
    <!-- bodyMainRight -->
</div>
<!-- bodyMainLeft -->

 The Page:
Objects that should display over all other objects on the page go here.

<asp:Content ID="bodyAll" ContentPlaceHolderID="bodyAllContentPlaceHolder"
    runat="Server">
    <div class="divHelpPopup1">
        <uc2:HelpPopup ID="HelpPopup1" runat="server" /> 
        <asp:Label ID="lblHelpPopup1" runat="server" CssClass="lblHelpPopup1" Text="Roll your mouse over the question mark."></asp:Label>
    </div>
</asp:Content>

CSS:
Use CSS position: absolute to position the popup panel.  Give it a width.  Use z-index to keep it on top.

.divHelpPopup1
{
    position: absolute;
    left: 0;
    top: 7em;
    width: 145px;
    padding: 1em;
    z-index: 90;
}