Asp: MenuItem / CSS

Question

I have an asp menu, with only 1 (top) level menu items. Each menu item should have a different way of recognizing CSS (for unique hovering, etc.). I am trying to avoid javascript solution.

Currently, I cannot find a way using asp and CSS to manage 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

Let's 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 an attribute selector, you should do it like

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

If you want to use a pseudo-class, you would do it like

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

If you want to use a class or id, just add the required class or ID to li in HTML and just 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 probably don't need the selector to be as specific as above, and may omit ul and others. This is just an example. Keep in mind that the pseudo-class and attribute selector have varied browser support.