StaticSelectedStyle-CssClass Not Working

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?

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

Did you heck your borwser source to make sure ASP.NET wasn't dynamically renaming your menu control ID value?

1- Define .selectedMenuItem class as below, independent of ID (#menu)

.selectedMenuItem {
        background: #FFFFFF;
        text-decoration: none;
        color: #333333;
}

2- Use jQuery's addClass method, bind that method to the click event of menu items.

http://api.jquery.com/addClass/

You can manage this from code behind on the Page_Load event of the Master file. For example, you can use the Request.Path method to get the current page Path and then use a switch or if statement to manually add the style to the corresponding MenuItem.

simply add this css in style sheet to show active tab with backgroung image or also add background active color no need to made any cahnge in menu control and add any static or dynamic style in menu .

.menu a.static.selected
{
background: url("../images/bg.jpg") repeat scroll 0 0;
color: white;``
text-decoration: none; 
}
.menu li a.dynamic.selected
{

background: url("../images/bg.jpg") repeat scroll 0 0;
color: white;
text-decoration: none; 
}