Выбранный пункт меню ASP.NET не сохраняет выбранный BackColor

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, равным AsyncPostBackTrigger asp:UpdatePanel.

Также, если вы используете css, забудьте атрибут StaticSelectedStyle asp:Menu.

«Выбранный» класс добавляется к выбранной ссылке при обратной передаче.

Просто используйте его в CSS (a.selected {}), чтобы получить эффект a:active {}.

Answer 2

Спасибо, Клатт, все работает.Я использовал ваш ответ, чтобы создать свое меню.Стиль отличается, если элемент выбран или при наведении мыши на элемент.

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

Answer 3

установить класс в пункт меню, например:

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