RadMenu for ASP.NET
Contents
Change the look of hovered items Send comments on this topic.
See Also
Controlling the visual appearance > How to > Change the look of hovered items

Glossary Item Box

The menu item renders as an anchor (A) tag (inside a list item (LI)). Therefore you can use the :hover CSS pseudo selector to customize the hover look of the menu items. The easiest way is to edit the CSS file of your skin.

Underline the text of the hovered items

We will use the CssBlue skin for the example.

  1. Open ~/RadControls/Menu/Skins/CssBlue/style.css.
  2. Create a new CSS rule in the following way:

      Copy Code
    .RadMenu_CssBlue .link:hover
    {
    }
                        

    This CSS rule will be applied to all items when the user hovers them with the mouse.
  3. Make the text underlined by setting the "text-decoration" CSS attribute:

      Copy Code
    .RadMenu_CssBlue .link:hover
    {
    text-decoration: underline;
    }
                            
    Now the item text will be underlined when hovered with the mouse:

Change the cursor of hovered items

To change the cursor edit the CSS rule mentioned above and set the "cursor" CSS attribute:

  Copy Code
.RadMenu_CssBlue .link:hover
{
text-decoration: underline;
cursor:pointer;
}
            

Now the cursor will change to "pointer" when the user hovers the item with the mouse:

Change the foreground/background of hovered items

Edit the CSS rule described earlier and set the "background-color" or "text" CSS attributes. You could apply the "!important" modifier if there is a more specific CSS rule which prevents your changes (as in the CssBlue skin):

  Copy Code
.RadMenu_CssBlue .link:hover
{
   text-decoration: underline;
   cursor:pointer;
   color:white;
   background-color: Aqua !important; /* Override the default */
}

In some cases skin modifications may not apply. This occurs if there is a more specific CSS rule which overrides your settings. Here is an example:

.RadMenu_CssBlue .group .link:hover
{
   color:green;
}

.RadMenu_CssBlue .link:hover
{
   color:red;
}

In this case the first CSS rule is more specific than the second and the color for hovered items would remain green. To make your settings always apply you can use the "!important" modifier. Or ever better - find the other CSS rule and apply your changes there. In the example mentioned above you can amend the second CSS rule like this (or simply edit the first rule):

.RadMenu_CssBlue .link:hover
{
   color:red !import;
}


Changing the hover state when the CssClass property of the item is set

In some cases the user needs to specify unique appearance for some item. This can be achieved by using the CssClass property of the RadMenuItem class. Here is a quick example:

  Copy Code
<style>
   .CustomItem
   {
       font-weight: bold;
       color: red !important; /*Override the default setting*/
   }
</style>
<rad:RadMenu runat="server" ID="RadMenu1" Skin="CssBlue">
   <Items>
       <rad:RadMenuItem Text="Root Item 1"  CssClass="CustomItem" />
       <rad:RadMenuItem Text="Root Item 2" />
       <rad:RadMenuItem Text="Root Item 3" />
   </Items>
</rad:RadMenu>

To change the appearance for the hover state of that item define a new CSS rule in the following way:

  Copy Code
<style>
.CustomItem
{
   font-weight: bold;
   color: red !important;
}
.CustomItem:hover
{
   color: white !important;
}
</style>

The ":hover" pseudo selector is used to customize the hover state. The ".CustomItem:hover" CSS rule applies only for the item whose CssClass property has been set to "CustomItem".


Here is how the end result looks like:

Normal state:

Hover state:

See Also