ASP.net: dropdown opened for selection is displayed in front of/above Menu displayed by Mouse Hover
<p>We have a asp.net menu control placed on Master Page and and there is a DropDown on the Content Page, both these are asp.net server controls.</p>

<p><b>On Master Page:</b></p>

<pre><code>&lt;asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" 
            EnableViewState="false" IncludeStyleBlock="false" &gt;
    &lt;Items&gt;
                ....                    
    &lt;/Items&gt;
  &lt;/asp:Menu&gt;
</code></pre>

<p>and on <b>Content Page</b></p>

<pre><code>&lt;asp:DropDownList ID="DropDownList1" runat="server" CssClass="back999" &gt;
                    &lt;asp:ListItem&gt;a&lt;/asp:ListItem&gt;
                    &lt;asp:ListItem&gt;b&lt;/asp:ListItem&gt;
                    &lt;asp:ListItem&gt;c&lt;/asp:ListItem&gt;
                    &lt;asp:ListItem&gt;d&lt;/asp:ListItem&gt;
                &lt;/asp:DropDownList&gt;
</code></pre>

<hr>

<p><strong>Behavior in Browser:</strong></p>

<ol>
<li>Step 1- Click on Drop Down: List of items is displayed.</li>
<li>Step 2- Now without clicking anywhere, hover the mouse on Menu: Menus are displayed</li>
</ol>

<p><strong>Result:</strong>
The List of items displayed in step 1, are overridden above Menu. The portion having drop down items are displayed over Menu.
<strong>Reference</strong> <a href="https://docs.google.com/open?id=0B0guWebeJArZejZGNDEweHJtOFE" rel="nofollow">Image</a></p>

<p>We have changed the z-index in positive till 9999 of Menu and in negative of dropdown, but nothing seems to be working.</p>

<p>All suggestions are appreciated!</p>
