ASP.NET突出显示所选菜单项

我试图在我的导航面板中突出显示所选MenuItem，但似乎无法理解为什么它不起作用。
下面是ASPX文件：ASP.NET突出显示所选菜单项

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

这里的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; 
    }

编辑
的HTML渲染（希望这是正确的）：

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

来源

2014-05-13 Brezhnews

看到生成的实际html会很有用。 –

可能重复的[asp.net - 问题静态选择样式的菜单选定的页面]（http://stackoverflow.com/questions/7148872/asp-net-problems-with-static-selected-style-for -a-selected-page-on-the-menu） – DaveParsons

你还可以添加它呈现的html。 – Alok

看一看我已经为您创建的fiddle。

否则，无法真正找到您的代码的具体问题。

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

正如你看到的我用.selected .nav_style突出选定的选项卡。给那一枪。

哦..我没有触及你的标记。所以，风格应该工作。

来源

2014-05-14 07:51:12 Alok

谢谢，这个修正了它。 – Brezhnews

您的课程是“已选”，但您的风格是“nav_se lected”

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

.nav_selected 
    { 
     background-color:red; 
    }

来源

2014-05-13 16:19:14 tintyethan

ASP.NET突出显示所选菜单项

回答

相关问题