Hover RootGroup Only? Custom Skin

[Michael]

Firstly, thanks for anyone reading this.

Re: Custom Skinning

I'm sure this is possible, but the code is eluding me. I have a background image (BackgroundTab.gif) set as the background of each of the RootGroup items. When I hover over it, I would like another image to replace the tab (BackgroundTab2.gif). However, thus far I have only been able to apply Background2.gif to any item I hover over, including child items. Any ideas on how to do this?

Thank you so much


Menu.ABMenu.css source

.RadMenu_ABMenu *
{
    padding: 0;
}


.RadMenu_ABMenu .rmHorizontal.rmRootGroup
{
    float: left;
    height: 15px;
}

.RadMenu_ABMenu .rmHorizontal.rmRootGroup .rmItem
{
    background: transparent url('Menu/BackgroundTab.gif') no-repeat;
}

.imgTab
{
    width: 100%;
    position: relative;
}

.RadMenu_ABMenu .rmHorizontal.rmRootGroup .rmFirst
{
    /*background-position: -750px 0;
    background: transparent url('Menu/BackgroundFirst.gif') no-repeat;
    height: 15px;
    width: 20px;*/
}

.RadMenu_ABMenu .rmHorizontal.rmRootGroup .rmLast
{
    /*background-position: 100% 0;
    background: transparent url('Menu/BackgroundLast.gif') no-repeat;
    height: 15px;*/
}

.RadMenu_ABMenu .rmVertical.rmRootGroup
{

    border: 1px solid #00FF00;
    float: left;
    padding: 0 5px;
}

/*Any item that links somewhere*/
.RadMenu_ABMenu .rmLink
{
    font: 11px/15px Arial,verdana,sans-serif;
    margin: 3px 0;
    color: #BB0000;
    text-decoration: none;
}

.RadMenu_ABMenu .rmLeftImage
{
    margin: 0 2px;
}

.RadMenu_ABMenu .rmText
{
    margin: 0 0 0 13px;
    padding: 0 13px 0 0;
}

.RadMenu_ABMenu .rmHorizontal.rmRootGroup .rmItem:hover
{
    background: transparent url('Menu/BackgroundTab2.gif') no-repeat;
}

.RadMenu_ABMenu .rmLink:hover,
.RadMenu_ABMenu .rmExpanded,
.RadMenu_ABMenu .rmFocused
{
    color: #fff;
    border-bottom: solid 1px #fff;
}

.RadMenu_ABMenu .rmLink:hover .rmText,
.RadMenu_ABMenu .rmExpanded .rmText,
.RadMenu_ABMenu .rmFocused .rmText
{
        /*background: #333;*/
}

/* submenus */

.RadMenu_ABMenu .rmRootGroup .rmGroup
{
    background: transparent url('Common/inoxHeader.jpg') repeat 0 0;
}

.RadMenu_ABMenu .rmRootGroup .rmGroup .rmItem
{
    background: none;
    padding: 1px 5px;
}

.RadMenu_ABMenu .rmRootGroup .rmGroup .rmLink
{
    line-height: 17px;
    color: #0000DD;
}

.RadMenu_ABMenu .rmRootGroup .rmGroup .rmLeftImage
{
    margin: 0 3px;
}

/*Items below the RootGroup*/
.RadMenu_ABMenu .rmRootGroup .rmGroup .rmLink:hover,
.RadMenu_ABMenu .rmRootGroup .rmGroup .rmExpanded,
.RadMenu_ABMenu .rmRootGroup .rmGroup .rmFocused
{
    color: #171717;
    background: transparent url('Menu/separatorTab.gif') no-repeat;
    background-position: 80px 0px;
}

.RadMenu_ABMenu .rmRootGroup .rmGroup .rmLink:hover .rmText,
.RadMenu_ABMenu .rmRootGroup .rmGroup .rmExpanded .rmText,
.RadMenu_ABMenu .rmRootGroup .rmGroup .rmFocused .rmText
{
    background: transparent url('Menu/ItemBgLight.gif') no-repeat 100% 0;
}

/* separators */
.RadMenu_ABMenu .rmVertical.rmRootGroup .rmItem.rmSeparator
{
    background: #CCC;
    height: 1px;
    font-size: 0;
    line-height: 0;
    border-bottom: 3px solid #fff;
}

/*Affects any Item whose isSeparator field is set to true*/
.RadMenu_ABMenu .rmHorizontal.rmRootGroup .rmItem.rmSeparator
{
    background: transparent url('Menu/separatorTab.gif') no-repeat;
    width: 45px;
    height: 15px;
}

.RadMenu_ABMenu .rmHorizontal.rmRootGroup .rmVertical .rmItem.rmSeparator,
.RadMenu_ABMenu .rmVertical.rmRootGroup .rmVertical .rmItem.rmSeparator
{
    padding: 0;
    height: 1px;
    margin-left: 5px;
    border-bottom: 0;
}

/* disabled items */

.RadMenu_ABMenu .rmDisabled,
.RadMenu_ABMenu .rmDisabled:hover
{
    color: #666;
    background: none;
}

.RadMenu_ABMenu .rmDisabled:hover .rmText
{
    background: none;
}

.RadMenu_ABMenu .rmTopArrow,
.RadMenu_ABMenu .rmBottomArrow
{
    height: 10px;
    width: 100%;
    background: #000 url(Menu/ArrowScrollUpDown.gif) no-repeat top center;
}

.RadMenu_ABMenu .rmBottomArrow
{
    background-position: center -18px;
}

.RadMenu_ABMenu .rmLeftArrow,
.RadMenu_ABMenu .rmRightArrow
{
    width: 10px;
    height: 100%;
    background: #000 url(Menu/ArrowScrollLeftRight.gif) no-repeat left center;
}

.RadMenu_ABMenu .rmRightArrow
{
    background-position: -18px center;
}

[Yana]

Hi Michael,

Please add the following style to set the hover image of root items:

.RadMenu_ABMenu .rmRootGroup .rmLink:hover   {
   background: transparent url('Menu/BackgroundTab2.gif') no-repeat;
}

I hope this helps.

Best wishes,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.