ASP：菜单和CSS选择的项目

我有我的配置问题的asp：菜单。当我使用任何CSS时，菜单项不再被选中。我试过3个版本，每个版本都有缺点。ASP：菜单和CSS选择的项目

这一个工作，最好的CSS，但所选择的项目没有得到选择。

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" Orientation="Horizontal" StaticEnableDefaultPopOutImage="false"DataSourceID="smdsMaster" StaticDisplayLevels="2"> 
    <LevelMenuItemStyles> 
     <asp:MenuItemStyle ForeColor="White"/> 
     <asp:MenuItemStyle ForeColor="White" /> 
    </LevelMenuItemStyles> 
    <Items> 
     <asp:MenuItem Text="Menu 1" NavigateUrl="~/Menu1.aspx" /> 
     <asp:MenuItem Text="Menu 2" NavigateUrl="~/Menu2.aspx" > 
      <asp:MenuItem Text="Submenu 2" NavigateUrl="~/Submenu2.aspx" /> 
     </asp:MenuItem> 
    <asp:MenuItem Text="Menu 3" NavigateUrl="~/Menu3.aspx" /> 
    </Items> 
</asp:Menu>

这一个显示选择，但我不能使用图像作为backgound的的菜单项。如果我在其中添加css，选择将不再显示。该子项目始终存在。

<asp:Menu ID="NavigationMenu" runat="server" DataSourceID="smdsMaster" DynamicHorizontalOffset="0" StaticEnableDefaultPopOutImage="false" 
Orientation="Horizontal" StaticDisplayLevels="2" StaticSubMenuIndent="0px" MaximumDynamicDisplayLevels="2" OnMenuItemDataBound="Menu1_MenuItemDataBound" 
ForeColor="White" BackColor="#EE7B00" StaticItemFormatString="<p align=center> {0}" DynamicItemFormatString="<p align=center> {0}"> 
    <StaticMenuItemStyle BackColor="#EE7B00" Width="110px" Height="31px" HorizontalPadding="0px" VerticalPadding="0px" /> 
    <StaticHoverStyle BackColor="#CCCC00" /> 
    <StaticSelectedStyle BackColor="#CCCC00" /> 
    <DynamicMenuItemStyle HorizontalPadding="0px" VerticalPadding="0px" Width="110px" Height="31px" /> 
    <DynamicHoverStyle BackColor="#CCCC00" /> 
    <DynamicMenuStyle BackColor="#EE7B00" /> 
    <DynamicSelectedStyle BackColor="#CCCC00" /> 
</asp:Menu>

我该如何做到这一点：图像作为我的菜单项的背景，其上有文字，并显示女巫项目被选中。

谢谢。

UPDATE

下面是与它去的CSS：

.page .header_menu .menu 
{ 
    !margin: 0px; 
    padding: 0; 
    list-style: none; 
    background: none; 
    z-index: 3; 
} 

.page .header_menu .menu li 
{ 
    padding: 0; 
    margin: 0; 
    height: 31px; 
    list-style: none; 
    background-repeat: no-repeat; 
    float: left; 
    width: 110px; 
} 

.page .header_menu .menu li a 
{ 
    display: block; 
    text-decoration: none; 
    text-align: center; 
    height: 31px; 
    width: 110px; 
    padding-top: 5px; 
    background-repeat: no-repeat; 
    background-image: url(../Assets/btn-back-normal.gif); 
    color: white; 
    margin-top: -1px; /*Chrome = -16, IE = 0*/ 
    z-index: 1; 
} 

.page .header_menu .menu li a:hover 
{ 
    background-image: url(../Assets/btn-back-over.gif); 
    color: white; 
    margin-top: -1px; /*Chrome = -16, IE = 0*/ 
    z-index: 1; 
    width: 110px; 
} 

.page .header_menu .menu li a:active, .page .header_menu .menu li a:selected 
{ 
    background-image: url(../Assets/btn-back-selected.gif); 
    color: white; 
    margin-top: -1px; 
    z-index: 1; 
    width: 110px; 
} 

.page .header_menu .menu:after 
{ 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
    z-index: 1; 
    width: 110px; 
}

我也试着设置这些，但只有第一项保持选中状态，无论wicht一个实际选择

<style type="text/css"> 
#NavigationMenu a{padding-right: 0px; padding-left: 0px; padding-top: 5px; height: 26px; background-color: #EE7B00;} 
#NavigationMenu a.static{ padding-right: 0px; padding-left: 0px; padding-top: 5px; height: 26px; background-color: #EE7B00;} 
#NavigationMenu a.static.selected{padding-right: 0px; padding-left: 0px; padding-top: 5px; height: 26px; background-color: #cccc00;} 
#NavigationMenu a.dynamic{padding-right: 0px; padding-left: 0px; padding-top: 5px; height: 26px; background-color: #EE7B00;} 
#NavigationMenu a.dynamic.selected{padding-right: 0px; padding-left: 0px; padding-top: 5px; height: 26px; background-color: #cccc00;} 
</style>

来源

2012-11-14 GaZ

尝试向我们展示你的HTML + CSS，而不是你的.NET源代码。 –

如果您运行.aspx页面并检查源代码，您将注意到菜单项<a>（超链接）标签都有一个称为选择类a.selected.static你可以实现自己的这个版本在你的代码，并通过应用!important的CSS类覆盖它。

样本下面显示与图像菜单项简单的菜单选择时突出了红色边框的图像：

<head runat="server"> 
    <title>Menu</title> 
    <style type="text/css"> 
     a.selected.static 
     { 
      border:2px solid red !important; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"> 
     <Items> 
      <asp:MenuItem ImageUrl="~/Images/1.jpg" Text="Item 1" /> 
      <asp:MenuItem ImageUrl="~/Images/2.jpg" Text="Item 2" /> 
      <asp:MenuItem ImageUrl="~/Images/3.jpg" Text="Item 3" /> 
     </Items> 
    </asp:Menu> 
    </form> 
</body>

来源

2012-11-14 20:30:44

感谢您的提示，我现在选择了第一个项目。问题是，这是唯一一个被选中的人，无论我点击一个巫婆。我还缺少什么？ – GaZ

我发现我的错误：如果选择一个子节点，我选择父节点来代替。由于我的第一个项目是所有项目的父项目，因此这是唯一一个被选中的项目。我会为孩子节点做更多的指定。 – GaZ

我的猜测是，所有已设置的重写选择style.I使用我的样品中确切的代码建议和删除任何其他的CSS属性的其他CSS样式和菜单属性可能会干扰menu.I've测试了我的样本中的IE，Firefox和Chrome浏览器和其菜单项之间成功地选择和设置边框 –

ASP：菜单和CSS选择的项目

回答

相关问题