Add hover property for menu in asp.net, I am using a link as menu

Question

I add menu item during page load of my Master page. I check for role permission and add items to the menu based on that.

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

Master Page Load:

NavigationMenu.Items.Add(new MenuItem
             {

                 Text = "Support",
                 NavigateUrl = "~/Support.aspx"
             });

I have this css property for link

a:hover
{
    background-color: #F9F6F4;
    color: #465c71;
    text-decoration: none;
}

because of this the menu item is also a link this css property is applied to it. I dont want to use the same css property for the menu, how can I give hover link for menu seperately.

Answer 1

#NavigationMenu a:hover {
 background-color: #FF0000;
 color: #0000FB;
 text-decoration: none;
}

a:hover {
 background-color: #F9F6F4;
 color: #465c71;
 text-decoration: none;
}

Also of note is that you don't necessarily have to have the hover pseudo-class on an a tag unless you want backwards compatibility with IE6 and IE7(?).

This is an instance of specificity. Here's a good link to help you understand it better. http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/