StaticSelectedStyle-CssClass Not Working

Question

I am building an ASP.NET 4.0 web application in which I have a menu control as follows:

   #menu {
        width: 940px;
        height: 36px;
        margin: 0 auto;
        padding: 0;
    }

    #menu ul {
        margin: 0px 0px 0px 10px;
        padding: 0;
        list-style: none;
        line-height: normal;
    }

    #menu li {
        float: left;
    }

    #menu a {
        display: block;
        height: 26px;
        margin-right: 2px;
        margin-bottom: 10px;
        padding: 10px 20px 0px 20px;
        text-decoration: none;
        text-align: center;
        text-transform: uppercase;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: bold;
        color: #FFFFFF;
        border: none;
    }

    #menu a:hover, .selectedMenuItem {
        background: #FFFFFF;
        text-decoration: none;
        color: #333333;
    }


    <asp:Menu ID="menu" runat="server" StaticSelectedStyle-CssClass="selectedMenuItem">
    <Items>
        <asp:MenuItem Text="Home" Selected="true" NavigateUrl="~/Home.aspx"></asp:MenuItem>
        <asp:MenuItem Text="About Us" NavigateUrl="~/AboutUs.aspx"></asp:MenuItem>
        <asp:MenuItem Text="Services" NavigateUrl="~/Services.aspx"></asp:MenuItem>
        <asp:MenuItem Text="Contact" NavigateUrl="~/Contact.aspx"></asp:MenuItem>
    </Items>
    </asp:Menu>

I want the selected menu item to be styled according to the css class selectedMenuItem but for some reason that doesn't happen. How can I fix this problem?

Answer 1

I got the same problem and tried to find out what happened. In the source-code of thje html-page I found this:

<div class="menu" id="NavigationMenu">
    <ul class="level1">
        <li><a class="level1" href="../Default.aspx">Start</a></li>
        <!-- more li items with the same class -->
    </ul>

I expected my CssClass name but found level1 instead. If I changed my css to:

#NavigationMenu .level1 li
{
    padding: 10px;
}

it worked. Probably not the correct way to do it, but it's a work-around of the problem at hand. Probably not suitable on a production server, unfortunately