Question

我正在尝试在我的导航面板中突出显示所选的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>

Answer 1

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

哦，我没有触及你的标记。因此，风格应该有效。

Answer 2

您的课程已被选中＆＃34;，但您的风格是＆＃34; nav_selected＆＃34;

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

VS

.nav_selected
     {
         background-color:red;
     }

ASP.NET突出显示所选的MenuItem

2 个答案: