asp:菜单项/CSS

Question

我有一个 asp 菜单，只有 1 级（顶级）菜单项。每个菜单项都需要有不同的方式来被 CSS 识别（用于独特的悬停等）。我试图避免使用 javascript 解决方案。

目前我找不到仅使用 asp 和 CSS 来控制单个菜单项的方法。任何帮助将不胜感激！

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
                    IncludeStyleBlock="false" Orientation="Horizontal">

    <Items>
        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="My Tab" />
        <asp:MenuItem NavigateUrl="foo.aspx" Text="etc" />
    </Items>
</asp:Menu>

Answer 1

假设你有

<ul class="menu">
<li><a href="#foo1">First Item</a></li>
<li><a href="#foo2">Second Item</a></li>
<li><a href="#foo3">Third Item</a></li>
<li><a href="#foo4">Fourth Item</a></li>
<li><a href="#foo5">Fifth Item</a></li>
</ul>

如果你想使用属性选择器，你会这样做

ul.menu>li>a[href="foo1"]:hover
{
background-color: blue;
}

如果你想使用伪类，你会这样做

ul.menu>li:nth-child(1)>a:hover
{
background-color: blue;
}

如果你想使用类或id，只需将所需的类或ID添加到 li 中HTML 并简单地使用

ul.menu>li.class_name>a:hover /*class used*/
{
background-color: blue;
}

ul.menu>li.id_name>a:hover /*id used*/
{
background-color: blue;
}

您可能不需要像上面那样具体的选择器，并且可以省略 ul 和其他类似的内容。这只是一个例子。请记住，伪类和属性选择器在不同的浏览器中具有不同的支持。