ASP.NET highlight sélectionné MenuItem

Question

J'essaie de mettre en surbrillance MenuItem sélectionné dans mon panneau de navigation, mais je n'arrive pas à comprendre pourquoi cela ne fonctionne pas.
Voici le fichier ASPX:

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

Voici le fichier CSS:

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

EDIT
HTML qui est rendu (espérons que c'est la bonne):

    <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

Jetez un oeil à la fiddle j'ai créé pour vous.

Sinon, vous ne trouvez pas vraiment le problème spécifique avec votre 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; 
} 

Comme vous le voyez, je l'ai utilisé .selected .nav_style pour sélectionner l'onglet sélectionné. Donnez un coup de feu.

Oh .. et je n'ai pas touché votre balisage. Donc, les styles devraient fonctionner.

Answer 2

Votre classe est "sélectionnée", mais votre style est "nav_se" lected »

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

vs

.nav_selected 
    { 
     background-color:red; 
    }