Hi,

I have a custom menu set up that works fine in IE7, but in firefox, the background graphic for the menu items does not get displayed behind each item, but just once in the middle of the menu.

Any idea what might be wrong?

My css file is a follows (copy of Web20 with changes for new background graphics)

/* r.a.d.menu Web 2.0 skin */

.RadMenu_Web20
{
 background: url(Menu/MenuItemBackground.gif);
 border-left: solid 1px #617fb5;
}

.RadMenu_Web20_Context
{
 background: none;
 border:0;
}

.RadMenu_Web20 .rmLink
{
 text-decoration: none;
 color: #fff;
 border-left: solid 1px #c2cfe3;
 border-right: solid 1px #617fb5;
 background: transparent;
}

.RadMenu_Web20 .rmLink:hover,
.RadMenu_Web20 .rmFocused,
.RadMenu_Web20 .rmExpanded
{
 color: #006;
 background: transparent url(Menu/MainItemBackgroundHover.gif) no-repeat center;
}

.RadMenu_Web20 .rmText
{
 /*background: transparent url(Menu/RootGroupArrowDown.gif) no-repeat right center;*/
 padding-left: 22px; /* should be adjusted to the size of the images, if they are larger than 16x16px */
 margin-right: 4px;
 font: bold 12px Arial, Verdana, Sans-serif;
 line-height: 28px;
 padding-right: 24px;
    background-image:none;
}

.RadMenu_Web20 .rmRootGroup .rmText .rmLeftImage
{
 margin: 3px 1px 0; /* should be adjusted to the size of the images, if they are larger than 16x16px */
}

.RadMenu_Web20 .rmHorizontal .rmExpandBottom, 
.RadMenu_Web20 .rmHorizontal .rmExpandTop 
{ 
  background: transparent url(Menu/RootGroupArrowDown.gif) no-repeat right center; 
}

.RadMenu_Web20 .rmVertical .rmExpandLeft,
.RadMenu_Web20 .rmVertical .rmExpandRight 
{ 
  background: transparent url(Menu/invertedGroupImage.gif) no-repeat right center; 
}

.RadMenu_Web20 .rmSlide
{
 margin-top:-1px;
}

.RadMenu_Web20 .rmGroup
{
 border: solid 1px #ffffff;
 background: transparent url(Menu/Flyout.jpg) no-repeat;
 color:#ffffff;
}

.RadMenu_Web20 .rmGroup .rmLink
{
 background: transparent url(Menu/Flyout.jpg) no-repeat;
 border: 0px;
 border-bottom: solid 1px #ffffff;
 color: #ffffff;
}

.RadMenu_Web20 .rmGroup .rmText
{
 font-weight: normal !important;
 background: none;
 margin-right: 0 !important;
 padding-left: 30px;
 padding-right: 40px;
 font-size: 11px;
}

.RadMenu_Web20 .rmGroup .rmLink:hover,
.RadMenu_Web20 .rmGroup .rmFocused,
.RadMenu_Web20 .rmGroup .rmExpanded
{
 background: transparent url(Menu/Flyout2.jpg) no-repeat;
 border: 0px;
 border-bottom: solid 1px #ffffff;
 color:#000000;
}

.RadMenu_Web20 .rmLeftArrow,
.RadMenu_Web20 .rmRightArrow,
.RadMenu_Web20 .rmTopArrow,
.RadMenu_Web20 .rmBottomArrow,
.RadMenu_Web20 .rmLeftArrowDisabled,
.RadMenu_Web20 .rmRightArrowDisabled,
.RadMenu_Web20 .rmTopArrowDisabled,
.RadMenu_Web20 .rmBottomArrowDisabled
{
 background: #e7f1ff url(Menu/left.gif) center center no-repeat;
 width: 15px;
 text-decoration:none;
 text-indent:-3000px;
 color:#e7f1ff;
 overflow:hidden;
}

.RadMenu_Web20 .rmTopArrow,
.RadMenu_Web20 .rmTopArrowDisabled
{
 background-image: url(Menu/top.gif);
 width: 100%;
 height: 15px;
}

.RadMenu_Web20 .rmBottomArrow,
.RadMenu_Web20 .rmBottomArrowDisabled
{
 background-image:url(Menu/bottom.gif);
 width: 100%;
 height: 15px;
}

.RadMenu_Web20 .rmRightArrow,
.RadMenu_Web20 .rmLeftArrow
{
 height: 100%;
}

.RadMenu_Web20 .rmRightArrow,
.RadMenu_Web20 .rmRightArrowDisabled
{
 background-image: url(Menu/right.gif);
}

.RadMenu_Web20 .rmVertical .rmSeparator
{
 padding-top: 2px;
 background: #6788be;
 font-size: 1px;
 line-height: 1px;
}

.RadMenu_Web20 .rmSeparator .rmText
{
 display: none;
}

.RadMenu_Web20 .rmExpandLeft,
.RadMenu_Web20 .rmExpandRight,
.RadMenu_Web20 .rmFocused .rmExpandLeft,
.RadMenu_Web20 .rmFocused .rmExpandRight,
.RadMenu_Web20 .rmExpanded .rmExpandLeft,
.RadMenu_Web20 .rmExpanded .rmExpandRight
{
 background: transparent url(Menu/invertedGroupImage.gif) right center no-repeat;
}

.RadMenu_Web20 .rmGroup .rmExpandLeft,
.RadMenu_Web20 .rmGroup .rmExpandRight,
.RadMenu_Web20 .rmGroup .rmFocused .rmExpandLeft,
.RadMenu_Web20 .rmGroup .rmFocused .rmExpandRight,
.RadMenu_Web20 .rmGroup .rmExpanded .rmExpandLeft,
.RadMenu_Web20 .rmGroup .rmExpanded .rmExpandRight
{
 background: transparent url(Menu/groupImage.gif) right center no-repeat;
}

/* mozilla only - disabled state */
.RadMenu_Web20 .rmLink.rmDisabled,
.RadMenu_Web20 .rmLink.rmDisabled:hover
{
 -moz-opacity: 0.8;
 opacity: 0.8;
 color: #ccc;
 background: none;
}

/*right-to-left support*/

.RadMenu_Web20_rtl,
.RadMenu_Web20_rtl *
{
    text-align:right;
}

.RadMenu_Web20_rtl .rmRootGroup .rmText
{
 padding-left: 24px;
 padding-right: 8px;
 margin-right: 0;
 margin-left: 4px;
}

.RadMenu_Web20_rtl .rmGroup .rmText
{
 margin-left: 0 !important;
 padding-left: 40px;
 padding-right: 30px;
}

.RadMenu_Web20 .rmLeftImage
{
 margin: 5px 2px 0;
}

.RadMenu_Web20_rtl .rmHorizontal .rmExpandBottom, 
.RadMenu_Web20_rtl .rmHorizontal .rmExpandTop 
{ 
  background-position:left center; 
}

.RadMenu_Web20_rtl .rmVertical .rmExpandLeft,
.RadMenu_Web20_rtl .rmVertical .rmExpandRight 
{ 
  background: transparent url(Menu/invertedGroupImageRTL.gif) no-repeat left center;
}

.RadMenu_Web20_rtl .rmGroup .rmExpandLeft,
.RadMenu_Web20_rtl .rmGroup .rmExpandRight 
{ 
  background: transparent url(Menu/groupImageRTL.gif) no-repeat 5px center; 
}

.RadMenu_Web20_rtl .rmVertical .rmLink:hover .rmExpandLeft,
.RadMenu_Web20_rtl .rmVertical .rmLink:hover .rmExpandRight,
.RadMenu_Web20_rtl .rmVertical .rmFocused .rmExpandLeft,
.RadMenu_Web20_rtl .rmVertical .rmFocused .rmExpandRight,
.RadMenu_Web20_rtl .rmVertical .rmExpanded .rmExpandLeft,
.RadMenu_Web20_rtl .rmVertical .rmExpanded .rmExpandRight
{
 background: transparent url(Menu/invertedGroupImageRTL.gif) left center no-repeat;
}

.RadMenu_Web20_rtl .rmGroup .rmLink:hover .rmExpandLeft,
.RadMenu_Web20_rtl .rmGroup .rmLink:hover .rmExpandRight,
.RadMenu_Web20_rtl .rmGroup .rmFocused .rmExpandLeft,
.RadMenu_Web20_rtl .rmGroup .rmFocused .rmExpandRight,
.RadMenu_Web20_rtl .rmGroup .rmExpanded .rmExpandLeft,
.RadMenu_Web20_rtl .rmGroup .rmExpanded .rmExpandRight
{
 background: transparent url(Menu/groupImageRTL.gif) 5px center no-repeat;
}

Also, the right arrow on the sub menu items only appears during hover, the "normal" right arrow doesn't appear.

The issues arise with all non-IE browsers, everything works fine in IE.

Hi

I noticed some obvious errors that had crept into the css file and have fixed them. So now if safari/firefox, I get the background image for the menu items OK, but the hover image doesn't appear. Also, on the sub menu items, the right arrow still doesn't appear in non-hover mode.

It all still works fine in IE.

I also decided not to be lazy and renamed the skin from Web20 to something different (my client's name).

The new file is :

.RadMenu_Logitech
{
 border-left: solid 1px #617fb5;
}

.RadMenu_Logitech_Context
{
 background: none;
 border:0;
}

.RadMenu_Logitech .rmLink
{
 text-decoration: none;
 color: #000;
 border-left: solid 1px #c2cfe3;
 border-right: solid 1px #617fb5;
 background: url(Menu/menubar.jpg) center;
 vertical-align:middle;
}

.RadMenu_Logitech .rmLink:hover,
{
 color: #000;
 font: bold, 12pt Verdana, Sans-serif;
 background: url(Menu/new_menu_bar02.jpg) center;
}

.RadMenu_Logitech .rmText
{
 /*background: transparent url(Menu/RootGroupArrowDown.gif) no-repeat right center;*/
 padding-left: 10px; /* should be adjusted to the size of the images, if they are larger than 16x16px */
 margin-right: 4px;
 font: 12pt Verdana, Sans-serif;
 padding-right: 10px;
 vertical-align:middle;
 line-height:46px;
}

.RadMenu_Logitech .rmRootGroup .rmText .rmLeftImage
{
 margin: 3px 1px 0; /* should be adjusted to the size of the images, if they are larger than 16x16px */
}

.RadMenu_Logitech .rmHorizontal .rmExpandBottom, 
.RadMenu_Logitech .rmHorizontal .rmExpandTop 
{ 
  background: transparent url(Menu/RootGroupArrowDown.gif) no-repeat right center; 
}

.RadMenu_Logitech .rmVertical .rmExpandLeft,
.RadMenu_Logitech .rmVertical .rmExpandRight 
{ 
  background: transparent url(Menu/white_arrow.gif) no-repeat right center; 
}

.RadMenu_Logitech .rmSlide
{
 margin-top:-1px;
}

.RadMenu_Logitech .rmGroup
{
 background: white;
}

.RadMenu_Logitech .rmGroup .rmLink
{
  background: transparent url(Menu/flyout_bluegrey.jpg) right center; 
 border: 0px;
 color: white;
 height:16px;
 border-bottom: solid 2px white;
 padding-right:10px;
 text-align:left;
}

.RadMenu_Logitech .rmGroup .rmText
{
 font-weight: normal !important;
 background: none;
 margin-right: 0 !important;
 padding-left: 10px;
 padding-right: 20px;
 font-size: 10px;
 line-height: 16px;
}

.RadMenu_Logitech .rmGroup .rmLink:hover,
.RadMenu_Logitech .rmGroup .rmFocused,
.RadMenu_Logitech .rmGroup .rmExpanded
{
  background: transparent url(Menu/flyout_darkblue.jpg) right center; 
 border: 0px;
 padding-right:10px;
 border-bottom: solid 2px white;
 color: #939598;
}

.RadMenu_Logitech .rmLeftArrow,
.RadMenu_Logitech .rmRightArrow,
.RadMenu_Logitech .rmTopArrow,
.RadMenu_Logitech .rmBottomArrow,
.RadMenu_Logitech .rmLeftArrowDisabled,
.RadMenu_Logitech .rmRightArrowDisabled,
.RadMenu_Logitech .rmTopArrowDisabled,
.RadMenu_Logitech .rmBottomArrowDisabled
{
 background: #e7f1ff url(Menu/left.gif) center center no-repeat;
 width: 15px;
 text-decoration:none;
 text-indent:-3000px;
 color:#e7f1ff;
 overflow:hidden;
}

.RadMenu_Logitech .rmTopArrow,
.RadMenu_Logitech .rmTopArrowDisabled
{
 background-image: url(Menu/top.gif);
 width: 100%;
 height: 15px;
}

.RadMenu_Logitech .rmBottomArrow,
.RadMenu_Logitech .rmBottomArrowDisabled
{
 background-image:url(Menu/bottom.gif);
 width: 100%;
 height: 15px;
}

.RadMenu_Logitech .rmRightArrow,
.RadMenu_Logitech .rmLeftArrow
{
 height: 100%;
}

.RadMenu_Logitech .rmRightArrow,
.RadMenu_Logitech .rmRightArrowDisabled
{
 background-image: url(Menu/grey_arrow.gif);
}

.RadMenu_Logitech .rmVertical .rmSeparator
{
 padding-top: 2px;
 background: #6788be;
 font-size: 1px;
 line-height: 1px;
}

.RadMenu_Logitech .rmSeparator .rmText
{
 display: none;
}

.RadMenu_Logitech .rmExpandLeft,
.RadMenu_Logitech .rmExpandRight,
.RadMenu_Logitech .rmFocused .rmExpandLeft,
.RadMenu_Logitech .rmFocused .rmExpandRight,
.RadMenu_Logitech .rmExpanded .rmExpandLeft,
.RadMenu_Logitech .rmExpanded .rmExpandRight
{
 background: transparent url(Menu/white_arrow.gif) right center no-repeat;
}

.RadMenu_Logitech .rmGroup .rmExpandLeft,
.RadMenu_Logitech .rmGroup .rmExpandRight,
{
 background: transparent url(Menu/grey_arrow.gif) right center no-repeat;
}

.RadMenu_Logitech .rmGroup .rmExpandLeft:hover,
.RadMenu_Logitech .rmGroup .rmExpandRight:hover,
.RadMenu_Logitech .rmGroup .rmFocused .rmExpandLeft,
.RadMenu_Logitech .rmGroup .rmFocused .rmExpandRight,
.RadMenu_Logitech .rmGroup .rmExpanded .rmExpandLeft,
.RadMenu_Logitech .rmGroup .rmExpanded .rmExpandRight
{
 background: transparent url(Menu/white_arrow.gif) right center no-repeat;
}

/* mozilla only - disabled state */
.RadMenu_Logitech .rmLink.rmDisabled,
.RadMenu_Logitech .rmLink.rmDisabled:hover
{
 -moz-opacity: 0.8;
 opacity: 0.8;
 color: #ccc;
 background: none;
}

/*right-to-left support*/

.RadMenu_Logitech_rtl,
.RadMenu_Logitech_rtl *
{
    text-align:right;
}

.RadMenu_Logitech_rtl .rmRootGroup .rmText
{
 padding-left: 24px;
 padding-right: 8px;
 margin-right: 0;
 margin-left: 4px;
}

.RadMenu_Logitech_rtl .rmGroup .rmText
{
 margin-left: 0 !important;
 padding-left: 40px;
 padding-right: 30px;
}

.RadMenu_Logitech .rmLeftImage
{
 margin: 5px 2px 0;
}

.RadMenu_Logitech_rtl .rmHorizontal .rmExpandBottom, 
.RadMenu_Logitech_rtl .rmHorizontal .rmExpandTop 
{ 
  background-position:left center; 
}

.RadMenu_Logitech_rtl .rmVertical .rmExpandLeft,
.RadMenu_Logitech_rtl .rmVertical .rmExpandRight 
{ 
  background: transparent url(Menu/invertedGroupImageRTL.gif) no-repeat left center;
}

.RadMenu_Logitech_rtl .rmGroup .rmExpandLeft,
.RadMenu_Logitech_rtl .rmGroup .rmExpandRight 
{ 
  background: transparent url(Menu/groupImageRTL.gif) no-repeat 5px center; 
}

.RadMenu_Logitech_rtl .rmVertical .rmLink:hover .rmExpandLeft,
.RadMenu_Logitech_rtl .rmVertical .rmLink:hover .rmExpandRight,
.RadMenu_Logitech_rtl .rmVertical .rmFocused .rmExpandLeft,
.RadMenu_Logitech_rtl .rmVertical .rmFocused .rmExpandRight,
.RadMenu_Logitech_rtl .rmVertical .rmExpanded .rmExpandLeft,
.RadMenu_Logitech_rtl .rmVertical .rmExpanded .rmExpandRight
{
 background: transparent url(Menu/invertedGroupImageRTL.gif) left center no-repeat;
}

.RadMenu_Logitech_rtl .rmGroup .rmLink:hover .rmExpandLeft,
.RadMenu_Logitech_rtl .rmGroup .rmLink:hover .rmExpandRight,
.RadMenu_Logitech_rtl .rmGroup .rmFocused .rmExpandLeft,
.RadMenu_Logitech_rtl .rmGroup .rmFocused .rmExpandRight,
.RadMenu_Logitech_rtl .rmGroup .rmExpanded .rmExpandLeft,
.RadMenu_Logitech_rtl .rmGroup .rmExpanded .rmExpandRight
{
 background: transparent url(Menu/groupImageRTL.gif) 5px center no-repeat;
}

I now have it almost working in all browsers - the only thing I can't make happen is the right arrow in the sub menu items when they are not hovered, in safari/firefox, but it works in IE.

My currnent css file is:

.RadMenu_Logitech
{
 border-left: solid 1px #617fb5;
 background: url(Menu/menubar.jpg) repeat-x;
 width:891px;
}

.RadMenu_Logitech_Context
{
 background: transparent;
 border:0;
}

.RadMenu_Logitech .rmLink
{
 text-decoration: none;
 color: #000;
 border-left: solid 1px #c2cfe3;
 border-right: solid 1px #617fb5;
 background: url(Menu/menubar.jpg) center;
 vertical-align:middle;
}

.RadMenu_Logitech .rmLink:hover
{
 color: #000;
 font: bold, 12pt Verdana, Sans-serif;
 background: url(Menu/new_menu_bar02.jpg) center;
}

.RadMenu_Logitech .rmText
{
 /*background: transparent url(Menu/RootGroupArrowDown.gif) no-repeat right center;*/
 padding-left: 10px; /* should be adjusted to the size of the images, if they are larger than 16x16px */
 margin-right: 4px;
 font: 12pt Verdana, Sans-serif;
 padding-right: 10px;
 vertical-align:middle;
 line-height:46px;
}

.RadMenu_Logitech .rmRootGroup .rmText .rmLeftImage
{
 margin: 3px 1px 0; /* should be adjusted to the size of the images, if they are larger than 16x16px */
}

.RadMenu_Logitech .rmHorizontal .rmExpandBottom, 
.RadMenu_Logitech .rmHorizontal .rmExpandTop 
{ 
  background: transparent url(Menu/RootGroupArrowDown.gif) no-repeat right center; 
}

.RadMenu_Logitech .rmVertical .rmExpandLeft,
.RadMenu_Logitech .rmVertical .rmExpandRight 
{ 
  background: transparent url(Menu/white_arrow.gif) no-repeat right center; 
}

.RadMenu_Logitech .rmSlide
{
 margin-top:-1px;
}

.RadMenu_Logitech .rmGroup
{
 background: white;
}

.RadMenu_Logitech .rmGroup .rmLink
{
  background: transparent url(Menu/flyout_bluegrey.jpg) right center; 
 border: 0px;
 height:16px;
 border-bottom: solid 2px white;
 padding-right:10px;
 text-align:left;
 color: #939598;
}

.RadMenu_Logitech .rmGroup .rmText
{
 font-weight: normal !important;
 background: none;
 margin-right: 0 !important;
 padding-left: 10px;
 padding-right: 20px;
 font-size: 10px;
 line-height: 16px;
}

.RadMenu_Logitech .rmGroup .rmLink:hover,
.RadMenu_Logitech .rmGroup .rmFocused,
.RadMenu_Logitech .rmGroup .rmExpanded
{
  background: transparent url(Menu/flyout_darkblue.jpg) right center; 
 border: 0px;
 padding-right:10px;
 border-bottom: solid 2px white;
 color: White;
}

.RadMenu_Logitech .rmLeftArrow,
.RadMenu_Logitech .rmRightArrow,
.RadMenu_Logitech .rmTopArrow,
.RadMenu_Logitech .rmBottomArrow,
.RadMenu_Logitech .rmLeftArrowDisabled,
.RadMenu_Logitech .rmRightArrowDisabled,
.RadMenu_Logitech .rmTopArrowDisabled,
.RadMenu_Logitech .rmBottomArrowDisabled
{
 background: #e7f1ff url(Menu/left.gif) center center no-repeat;
 width: 15px;
 text-decoration:none;
 text-indent:-3000px;
 color:#e7f1ff;
 overflow:hidden;
}

.RadMenu_Logitech .rmTopArrow,
.RadMenu_Logitech .rmTopArrowDisabled
{
 background-image: url(Menu/top.gif);
 width: 100%;
 height: 15px;
}

.RadMenu_Logitech .rmBottomArrow,
.RadMenu_Logitech .rmBottomArrowDisabled
{
 background-image:url(Menu/bottom.gif);
 width: 100%;
 height: 15px;
}

.RadMenu_Logitech .rmRightArrow,
.RadMenu_Logitech .rmLeftArrow
{
 height: 100%;
}

.RadMenu_Logitech .rmRightArrow,
.RadMenu_Logitech .rmRightArrowDisabled
{
 background-image: url(Menu/grey_arrow.gif);
}

.RadMenu_Logitech .rmVertical .rmSeparator
{
 padding-top: 2px;
 background: #6788be;
 font-size: 1px;
 line-height: 1px;
}

.RadMenu_Logitech .rmSeparator .rmText
{
 display: none;
}

.RadMenu_Logitech .rmExpandLeft,
.RadMenu_Logitech .rmExpandRight,
.RadMenu_Logitech .rmFocused .rmExpandLeft,
.RadMenu_Logitech .rmFocused .rmExpandRight,
.RadMenu_Logitech .rmExpanded .rmExpandLeft,
.RadMenu_Logitech .rmExpanded .rmExpandRight
{
 background: transparent url(Menu/white_arrow.gif) right center no-repeat;
}

.RadMenu_Logitech .rmGroup .rmExpandLeft,
.RadMenu_Logitech .rmGroup .rmExpandRight,
{
 background: transparent url(Menu/grey_arrow.gif) right center no-repeat;
}

.RadMenu_Logitech .rmGroup .rmExpandLeft:hover,
.RadMenu_Logitech .rmGroup .rmExpandRight:hover,
.RadMenu_Logitech .rmGroup .rmFocused .rmExpandLeft,
.RadMenu_Logitech .rmGroup .rmFocused .rmExpandRight,
.RadMenu_Logitech .rmGroup .rmExpanded .rmExpandLeft,
.RadMenu_Logitech .rmGroup .rmExpanded .rmExpandRight
{
 background: transparent url(Menu/white_arrow.gif) right center no-repeat;
}

/* mozilla only - disabled state */
.RadMenu_Logitech .rmLink.rmDisabled,
.RadMenu_Logitech .rmLink.rmDisabled:hover
{
 -moz-opacity: 0.8;
 opacity: 0.8;
 color: #ccc;
 background: none;
}

/*right-to-left support*/

.RadMenu_Logitech_rtl,
.RadMenu_Logitech_rtl *
{
    text-align:right;
}

.RadMenu_Logitech_rtl .rmRootGroup .rmText
{
 padding-left: 24px;
 padding-right: 8px;
 margin-right: 0;
 margin-left: 4px;
}

.RadMenu_Logitech_rtl .rmGroup .rmText
{
 margin-left: 0 !important;
 padding-left: 40px;
 padding-right: 30px;
}

.RadMenu_Logitech .rmLeftImage
{
 margin: 5px 2px 0;
}

.RadMenu_Logitech_rtl .rmHorizontal .rmExpandBottom, 
.RadMenu_Logitech_rtl .rmHorizontal .rmExpandTop 
{ 
  background-position:left center; 
}

.RadMenu_Logitech_rtl .rmVertical .rmExpandLeft,
.RadMenu_Logitech_rtl .rmVertical .rmExpandRight 
{ 
  background: transparent url(Menu/invertedGroupImageRTL.gif) no-repeat left center;
}

.RadMenu_Logitech_rtl .rmGroup .rmExpandLeft,
.RadMenu_Logitech_rtl .rmGroup .rmExpandRight 
{ 
  background: transparent url(Menu/groupImageRTL.gif) no-repeat 5px center; 
}

.RadMenu_Logitech_rtl .rmVertical .rmLink:hover .rmExpandLeft,
.RadMenu_Logitech_rtl .rmVertical .rmLink:hover .rmExpandRight,
.RadMenu_Logitech_rtl .rmVertical .rmFocused .rmExpandLeft,
.RadMenu_Logitech_rtl .rmVertical .rmFocused .rmExpandRight,
.RadMenu_Logitech_rtl .rmVertical .rmExpanded .rmExpandLeft,
.RadMenu_Logitech_rtl .rmVertical .rmExpanded .rmExpandRight
{
 background: transparent url(Menu/invertedGroupImageRTL.gif) left center no-repeat;
}

.RadMenu_Logitech_rtl .rmGroup .rmLink:hover .rmExpandLeft,
.RadMenu_Logitech_rtl .rmGroup .rmLink:hover .rmExpandRight,
.RadMenu_Logitech_rtl .rmGroup .rmFocused .rmExpandLeft,
.RadMenu_Logitech_rtl .rmGroup .rmFocused .rmExpandRight,
.RadMenu_Logitech_rtl .rmGroup .rmExpanded .rmExpandLeft,
.RadMenu_Logitech_rtl .rmGroup .rmExpanded .rmExpandRight
{
 background: transparent url(Menu/groupImageRTL.gif) 5px center no-repeat;
}

Hi Rob,

We cannot test only by using the CSS. Could you please provide a live url? If this is not an option you could open a formal support ticket and send us a simple page which reproduces the problem. Thanks.

Regards,
Albert
the Telerik team

Hi Albert,

The url is www.logitech.com.au

Currently the only thing not working is the right arrows when the sub menu is grey.

Cheers

Rob

Hello Rob,

Thank you for providing the url.

Please remove "background:none" css property form the following style in your Menu.Logitech.css file:



Kind regards,
Yana
the Telerik team

You could also remove the red comma as seen below:

RadMenu_Logitech .rmGroup .rmExpandLeft,
.RadMenu_Logitech .rmGroup .rmExpandRight,
{
 background: transparent url(Menu/grey_arrow.gif) right center no-repeat;
}

And note it's not the only place in that css where you end with a comma before {

Regards,
-DJ-

Thanks guys, that did the trick.

Rob