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

集類菜單項，例如：

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

Answer 2

這個職位是有點晚了，但可能是未來查詢有利。

的asp:Menu是如此，如果你正在使用asp:UpdatePanel確保它封閉在一個與asp:Menu ID是asp:UpdatePanel的AsyncPostBackTrigger回發時更新。

此外，如果您使用css忘記asp:Menu的StaticSelectedStyle屬性。

「選定」類將在回發中添加到所選鏈接。

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

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