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

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.