asp.NET - Проблемы со статическим выбранным стилем для выбранной страницы в меню

Question

Я использую asp.NET 4.0 с C # и недавно создал собственный дизайн для моего локального веб-приложения. Мне бы хотелось, чтобы при выборе страницы она имела другой цвет фона (обычно в обычном формате html + css мы просто устанавливаем пункт меню как активный). Я пытался использовать, но он не работает, он остается того же цвета, что и другие. Кто-нибудь имеет опыт работы с этим?

Код в мастере сайта:

            <h2>Dashboard</h2>
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Vertical" >
                <StaticSelectedStyle CssClass="selectedMenu" /> 
                <Items>
                    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="View Submissions"/>
                    <asp:MenuItem NavigateUrl="~/Imports.aspx" Text="Import"/>
                    <asp:MenuItem NavigateUrl="~/Submission.aspx" Text="Insert Submission"/>
                    <asp:MenuItem NavigateUrl="~/Reports.aspx" Text="Reports"/>
                    <asp:MenuItem NavigateUrl="~/CurrencyMaintenance.aspx" Text="Currency Maintenance" />
                    <asp:MenuItem NavigateUrl="~/Remittance.aspx" Text="Remittance" />
                </Items>
            </asp:Menu>

CSS:

/* TAB MENU   
----------------------------------------------------------*/
div.hideSkiplink
{
    background-color:#3a4f63;
    width:100%;
}

div.menu
{
    padding: 4px 0px 4px 8px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #FFF; /*680840*/
    border: 1px #4e667d solid;
    height: 20px;
    width: 175px;
    color: #000; /*FFF*/
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #680840;
    color: #FFF;
    text-decoration: none;
}

.selectedMenu
{
    background-color: #680840 !important;
    color: #FFF !important;
    text-decoration: none !important;
}

div.menu ul li a:active
{
    background-color: #680840;
    color: #cfdbe6;
    text-decoration: none;
}

Вот как это выглядит на Hover, я бы хотел, чтобы подобный эффект был выделен.

Answer 1

Это похоже на ошибку в меню .NET.Есть некоторая информация относительно этого здесь .Затем вы можете удалить атрибут staticSelectedStyle и просто добавить его в свой css:

.menu a.static.selected
{
    background-color: #680840 !important;
    color: #FFF !important;
    text-decoration: none !important;
}

Возможно, вам также придется добавить некоторый код в загрузку страницы мастера, чтобы определить, какой элемент должен быть выбранкак это:

protected void Page_Load(object sender, EventArgs e)
{
    string path = Request.AppRelativeCurrentExecutionFilePath;
    foreach (MenuItem item in NavigationMenu.Items)
    {
        item.Selected = item.NavigateUrl.Equals(path, StringComparison.InvariantCultureIgnoreCase);
    }
}