asp:MenuItem / CSS

Question

I have an asp menu, with only 1 (top) level of menu items. Each of the menu items needs to have a different way to be recognized by CSS (for unique hover, etc.). I'm trying to avoid a javascript solution.

Currently I can find no way with just asp and CSS to control individual menu items. Any help would be appreciated!

<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

Lets say you have

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

If you want to use the attribute selector, you would do as

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

If you want to use the pseudo class, you would do as

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

If you want to use class or id just add the required class or ID to the li in the HTML and simply use

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

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

You probally dont need the selector to be as specific as above and may omit the ul and others alike. It is just for an example. Please keep in mind that the pseudo class and attribute selector has varied support across browsers.