我实际上是将网站迁移到ASP.NET 4.0,有新的菜单控件渲染的问题。我的网站大量使用嵌套菜单。使用悬停效果,布局由主题和皮肤与链接CSS的组合定义。
如果我删除页面controlRenderingCompatibilityVersion属性,它们不再显示为嵌套表,而是作为ul / li Tags。这在很多方面打破了我的布局。对于迁移复杂的ASP.NET菜单布局的任何建议都是非常受欢迎的。
皮肤文件的相关部分
<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>
样式表
.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%; }
解决方法
如果从web.config中删除controlRenderingCompatibilityVersion属性,菜单渲染的默认模式从表到表隐含地更改。如果你仍然想让你的菜单呈现表标签,你需要通过添加RenderingMode属性在asp:菜单控件中明确指定:
<asp:Menu runat="server" RenderingMode="Table" ... > ... </asp:Menu>
(也在MSDN中的备注部分:http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.menu.renderingmode.aspx)