Question

我有一个asp.net菜单：

<asp:Menu ID="mnuMain" runat="server" 
  Orientation="Horizontal" 
  StaticDisplayLevels="1" 
  StaticHoverStyle-BackColor="White" 
  StaticSelectedStyle-BackColor="White">
  <Items>
    <asp:MenuItem Text="Home" Target="display" NavigateUrl="http://www.google.com"></asp:MenuItem>
    <asp:MenuItem Text="Test" Target="display" NavigateUrl="http://www.google.com"></asp:MenuItem>
  </Items>
</asp:Menu>

当我将鼠标悬停在菜单项上时，我会看到白色背景。

当我点击菜单项时，我的iframe导航到所选的网址，但所选的样式在菜单项上丢失。所选菜单项应保留白色背景。

如何让所选菜单项保持白色背景？

Answer 1

这篇文章有点晚，但对未来的查询可能有帮助。

asp:Menu会在回发后更新，因此，如果您使用的是asp:UpdatePanel，请确保其中包含asp:Menu ID为AsyncPostBackTrigger asp:UpdatePanel的{{1}} }。

此外，如果您使用的是css，请忘记StaticSelectedStyle的{{1}}属性。

在回发时，“选定”类会添加到选定的链接中。

只需在css asp:Menu中使用它即可发挥(a.selected {})的效果。

Answer 2

例如将class设置为menuitem：

<style> .active{background-color:white} </style><asp:MenuItem Text="Home" cssclass="active" Target="display" NavigateUrl="http://www.google.com"></asp:MenuItem>

Answer 3

谢谢Clatt，它有效。我用你的答案来创建我的菜单。如果选择了项目或鼠标悬停在项目上，则样式会有所不同。

ASPX：

<asp:Menu ID="Menu_MMT"  runat="server" Orientation="Horizontal">
        <StaticMenuItemStyle CssClass="menu-item" />
        <StaticMenuStyle CssClass="menuasp" />
 </asp:Menu>

CSS：

.menuasp
{
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#004d7d;
list-style:none;
padding:0px;
margin:0px;
margin-bottom:10px;
}
.menu-item
{
line-height:2em;
min-width:50px;
margin-right:10px;
padding: 5px 10px 7px 10px;
text-decoration:none;
text-align:center;
}

.menuasp a
{
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
color: #333 !important;
}
.menuasp a.selected
{
background: rgb(0,121,198); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(0,121,198,1) 0%, rgba(0,77,125,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,121,198,1)), color-stop(100%,rgba(0,77,125,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,121,198,1) 0%,rgba(0,77,125,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,121,198,1) 0%,rgba(0,77,125,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,121,198,1) 0%,rgba(0,77,125,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,121,198,1) 0%,rgba(0,77,125,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0079c6', endColorstr='#004d7d',GradientType=0 ); /* IE6-9 */
color: white !important ;
}
.menuasp a:hover
{
background: rgb(226,0,15); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(226,0,15,1) 0%, rgba(162,0,16,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,0,15,1)), color-stop(100%,rgba(162,0,16,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(226,0,15,1) 0%,rgba(162,0,16,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(226,0,15,1) 0%,rgba(162,0,16,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(226,0,15,1) 0%,rgba(162,0,16,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(226,0,15,1) 0%,rgba(162,0,16,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2000f', endColorstr='#a20010',GradientType=0 ); /* IE6-8 */
color: white !important ;
}

ASP.NET选定的菜单项不保留选定的BackColor

3 个答案: