ASP.NET 4 menu hides behind a div containing Silverlight app

Question

Hello!

I have an aspx page which has a ASP.NET 4 menu control (rendered as ul/li's instead of tables) and a div right below it which contains a Silverlight .xap. When the user selects a menu item in the menu control, the Silverlight app gets updated. In IE 7 & 8, when I hover over the menu, the menu items are "hidden" behind the Silverlight and I can partially see only the first child item. However, the menu appears just fine in Firefox. I thought something in my CSS caused it and I removed all CSS references but it still stays hidden behind the Silverlight app. How do I bring the menu control to the front?

Here's my menu -

 <asp:Menu ID="mnuReports" runat="server" Orientation="Horizontal" OnMenuItemClick="mnuReports_MenuItemClick"
        BackColor="#DDDDDD" ForeColor="#000000" StaticSubMenuIndent="10px" MaximumDynamicDisplayLevels="1"
        StaticEnableDefaultPopOutImage="False">
        <DynamicHoverStyle BackColor="#DDDDDD" />
        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="5px" BorderColor="#CCCCCC"
            BorderStyle="Solid" BorderWidth="1px" />
        <DynamicMenuStyle BackColor="#E3EAEB" />
        <DynamicSelectedStyle BackColor="#1C5E55" />
        <StaticHoverStyle BackColor="#DDDDDD" />
        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="5px" BorderColor="#CCCCCC"
            BorderStyle="Solid" BorderWidth="1px" Width="148px" Font-Bold="True" />
    </asp:Menu>

Answer 1

You can set the "windowless" and "background" parameters on the HTML <object /> tag of the Silverlight component to make sure it doesn't overlay other page elements.

<object id="silverlight" data="data:application/x-silverlight," type="application/x-silverlight-4" width="100%" height="100%" >
    <param name="source" value="ClientBin/YourSilverlight.xap"/>
    <param name="background" value="transparent" />
    <param name="windowless" value="true" />
</object>