ASP.NET Selected Menu Item Does not Retain Selected BackColor

I have an asp.net menu:

<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:M开发者_Go百科enuItem>
  </Items>
</asp:Menu>

When I hover over a menu item I get a white background.

When I click on a menu item my iframe navigates to the selected url but the selected style is lost on the menu item. The selected menu item should retain a white background.

How can I have the selected menu items retain a white background?

This post is a bit late but may be beneficial for future inquiries.

The asp:Menu is updated upon postback so if you're using asp:UpdatePanel ensure it's enclosed in one with the asp:Menu id being the AsyncPostBackTrigger of the asp:UpdatePanel.

Also if you're using css forget the StaticSelectedStyle attribute of the asp:Menu.

A "selected" class is added to the selected link on postback.

Simply use it in a css (a.selected {}) to give the effect of a:active {}.

set class to menuitem for instance :

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

Thanks Clatt, it works. I used your answer to create my menu. The style is different if the item is selected or if the mouse is hover the item.

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