Question

I am actually migrating websites to ASP.NET 4.0, having problems with the new rendering of menu controls. My websites make heavy use of nested menus. Hover effects are used and the layout is defined by a combination of themes and skins with linked CSS.

If I remove the pages controlRenderingCompatibilityVersion attribute, they are no longer rendered as nested tables, but as ul/li Tags. This breaks my layout in many ways. Any recommendations for a migration of a complex ASP.NET menu layout are very welcome.

Edited: Markup and CSS details as response to comment

Relevant section of the skin file

<asp:Menu runat="server" DynamicHorizontalOffset="2" Orientation="Horizontal" SkipLinkText=""
    StaticPopOutImageUrl="~/App_Images/Themes/arrow_down.gif" DynamicPopOutImageUrl="~/App_Images/Themes/arrow_right.gif">
    <StaticMenuItemStyle CssClass="MenuDefaultMenuItemStyle" />
    <DynamicMenuItemStyle  CssClass="MenuDefaultMenuItemStyle" />

    <StaticSelectedStyle CssClass="MenuDefaultSelectedStyle" />
    <DynamicSelectedStyle CssClass="MenuDefaultSelectedStyle" />

    <StaticHoverStyle CssClass="MenuDefaultHoverStyle" />
    <DynamicHoverStyle CssClass="MenuDefaultHoverStyle" />
</asp:Menu>

<asp:Menu runat="server" SkinId="MenuVertical" DynamicHorizontalOffset="2" SkipLinkText=""
    StaticPopOutImageUrl="~/App_Images/Themes/arrow_right.gif" DynamicPopOutImageUrl="~/App_Images/Themes/arrow_right.gif">
    <StaticMenuItemStyle CssClass="MenuVerticalMenuItemStyle" />
    <DynamicMenuItemStyle  CssClass="MenuVerticalMenuItemStyle" />

    <StaticSelectedStyle CssClass="MenuVerticalSelectedStyle" />
    <DynamicSelectedStyle CssClass="MenuVerticalSelectedStyle" />

    <StaticHoverStyle CssClass="MenuVerticalHoverStyle" />
    <DynamicHoverStyle CssClass="MenuVerticalHoverStyle" />
</asp:Menu>

Stylesheet

.MenuDefaultMenuItemStyle
{
    background-color: #D5DCE1;
    color: #234875;
    padding: 2px;
    width: 100%;
}

.MenuDefaultSelectedStyle
{
    background-color: #3C5778;
    color: #FFFFFF;
    padding: 2px;
    width: 100%;
}

.MenuDefaultHoverStyle
{
    background-color: #666666;
    color: #FFFFFF;
    padding: 2px;
    width: 100%;
}

.MenuVerticalMenuItemStyle
{
    background-color: #FFFFFF;
    border: 1px solid #D5DCE1;
    color: #234875;
    height: 30px;
    padding: 2px;
    width: 100%;
}

.MenuVerticalSelectedStyle
{
    background-color: #003366;
    border: 1px solid #D5DCE1;
    color: #FFFFFF;
    height: 30px;
    padding: 2px;
    width: 100%;
}

.MenuVerticalHoverStyle
{
    background-color: #EEEEEE;
    border: 1px solid #000000;
    color: #234875;
    height: 30px;
    padding: 2px;
    width: 100%;
}

Answer 1

If you remove the controlRenderingCompatibilityVersion attribute from web.config the default mode for menu rendering changes implicitely from Table to List. If you still want to have your menu rendered with table tags you need to specify this explicitely in your asp:menu control by adding the RenderingMode attribute:

<asp:Menu runat="server" RenderingMode="Table" ... >
   ...
</asp:Menu>

(s. also the remarks section here in MSDN: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.menu.renderingmode.aspx)