c# - ASP.NET突出显示选中的MenuItem

我试图在导航面板中突出显示选定的MenuItem，但似乎无法理解为什么它不起作用。
这是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>

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

最佳答案

看看我为您创建的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突出显示了所选的标签。试一试。

哦..我还没有碰到你的标记。因此，样式应该起作用。

关于c# - ASP.NET突出显示选中的MenuItem，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23635073/