ASP.NET 选定的菜单项不保留选定的背景色

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 导航到选定的 url，但选定的样式在菜单项上丢失。所选菜单项应保留白色背景。

如何让选定的菜单项保留白色背景？

Answer 1

这篇文章有点晚了，但可能对以后的查询有益。

asp:Menu 在回发时更新，因此如果您使用 asp:UpdatePanel，请确保将其包含在一个 asp:Menu id 中asp:UpdatePanel 的 AsyncPostBackTrigger。

另外，如果您使用 css，请忘记 asp:Menu 的 StaticSelectedStyle 属性。

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

只需在 css (a.selected {}) 中使用它即可实现 a:active {} 的效果。

Answer 2

例如将类设置为 menuitem ：

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

Answer 3

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

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 ;
}