ASP.NET突出显示所选的MenuItem

Question

I am trying to highlight selected MenuItem in my navigation panel, but can't seem to understand why it's not working.
Here is the ASPX file:

<asp:Menu ID="Main_menu" runat="server" Orientation="Horizontal">
     <StaticSelectedStyle CssClass="nav_selected" />
     <StaticItemTemplate>
          <div class="nav_style">
          <asp:Label runat="server" Text='<%# Eval("Text") %>' /> 
          </div>
     </StaticItemTemplate>
     <Items>
          <asp:MenuItem NavigateUrl="~/home.aspx" Text="home" />
          <asp:MenuItem NavigateUrl="~/what-it-can-do.aspx" Text="what it can do" />
          <asp:MenuItem NavigateUrl="#" Text="pricing" />
          <asp:MenuItem NavigateUrl="#" Text="news & events" />
          <asp:MenuItem NavigateUrl="#" Text="partner with us" />
     </Items>
</asp:Menu>

Here is the CSS file:

.nav_selected
     {
         background-color:red;
     }
.nav_style
     {
         list-style:none;
         background-color:#242C32;
         border-radius:3px;
         color:#F5F5F5;           
         border-top:4px solid #242C32;
         border-bottom:4px solid #242C32;
         border-left:12px solid #242C32;
         border-right:12px solid #242C32;
         font:14px calibri;
     }
.nav_style:hover
     {
         color:#0B8BBF;
     }

HTML that is rendered(hope this is the right one):

                    <a href="#PageHeader_Main_menu_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=ILNNewtPvesYj-keR2OtzG1BUzU1n0CHnwnTQ2TLfIDO2cZBagUxjpSkZw3gSRJ6NvONia8D7dYw2ebl0erF93Ds_kQ1&amp;t=635201010537823876" width="0" height="0" style="border-width:0px;" /></a><div id="PageHeader_Main_menu">
    <ul class="level1">
        <li><a class="level1 selected" href="home.aspx">
                            <div class="nav_style">
                            <span>home</span> 
                            </div>
                        </a></li><li><a class="level1" href="what-it-can-do.aspx">
                            <div class="nav_style">
                            <span>what it can do</span> 
                            </div>
                        </a></li><li><a class="level1" href="#">
                            <div class="nav_style">
                            <span>pricing</span> 
                            </div>
                        </a></li><li><a class="level1" href="#">
                            <div class="nav_style">
                            <span>news & events</span> 
                            </div>
                        </a></li><li><a class="level1" href="#">
                            <div class="nav_style">
                            <span>partner with us</span> 
                            </div>
                        </a></li>
    </ul>
</div><a id="PageHeader_Main_menu_SkipLink"></a>

Answer 1

Have a look at the fiddle I have created for you.

Otherwise, could not really find the specific problem with your code.

.nav_style
 {
     list-style:none;
     font:14px calibri;
     background-color: none;
     padding: 10px;
 }
.nav_style:hover
 {
     background-color:red;
 }
.selected .nav_style{
    background-color: yellow;
 }

As you see I have used .selected .nav_style to highlight the selected tab. Give that a shot.

Oh.. and I haven't touched your markup. So, the styles should work.

Answer 2

Your class is "selected", but your style is "nav_selected"

<a class="level1 selected" href="home.aspx">

vs

.nav_selected
     {
         background-color:red;
     }