IE6 expand arrow not appearing

[donavon]

I setup my own skin based upon the RadMenu Default skin. I'm able to get the down arrow to appear on the root menu items in IE7 and Firefox just fine. but unable to get them to work in IE6.

Here is a copy of the stylesheet i'm using.

/* RadMenu Default skin */

.RadMenu_Custom
{
 /*border: 1px solid #010101;*/
 border-bottom-width: 0;
 /*border-top-color: #383838;
 background: #444 url(Menu/MenuBackground.gif) repeat-x top left;*/
 text-align: left;
}

.RadMenu_Custom_rtl
{
 text-align: right;
}

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

.RadMenu_Custom a
{
 text-decoration: none;
}

.RadMenu_Custom .rmLink
{
 line-height: 24px;
 text-decoration: none;
 color: #fff;
}

.RadMenu_Custom .rmLink:focus,
.RadMenu_Custom .rmFocused
{
 outline: 0;
}

.RadMenu_Custom .rmExpanded
{
 z-index: 10000;
}

.RadMenu_Custom .rmLink:hover,
.RadMenu_Custom .rmFocused,
.RadMenu_Custom .rmExpanded
{

 color: #333;
}

.RadMenu_Custom .rmLink .rmText
{
 
 font: normal 12px Arial, sans-serif;
}
.RadMenu_Custom .rmHorizontal .rmExpandDown
{ 
  background: transparent url(Menu/RootGroupArrowDown.gif) no-repeat right center; 
}
.RadMenu_Custom .rmGroup
{
 background: #fff;
}

.RadMenu_Custom .rmGroup .rmLink
{
 text-decoration: none;
 color: #333;
}

.RadMenu_Custom_rtl .rmGroup .rmLink
{
 text-align: right;
}

.RadMenu_Custom .rmGroup .rmLink:hover,
.RadMenu_Custom .rmGroup .rmFocused,
.RadMenu_Custom .rmGroup .rmExpanded
{
 color: #fff;
 background: #444;
}

.RadMenu_Custom .rmText
{
 padding: 3px 20px 5px 20px;
}

.RadMenu_Custom .rmGroup .rmLink .rmText
{
 font-size: 11px;
}

/* <expand arrows styling> */

.RadMenu_Custom .rmGroup .rmLink .rmExpandRight
{
 background: transparent url(Menu/ArrowExpand.gif) no-repeat right -3px;
}

.RadMenu_Custom .rmGroup .rmLink .rmExpandLeft
{
 background: transparent url(Menu/ArrowExpandRTL.gif) no-repeat left -3px;
}

.RadMenu_Custom .rmGroup .rmLink:hover .rmExpandRight,
.RadMenu_Custom .rmGroup .rmFocused .rmExpandRight,
.RadMenu_Custom .rmGroup .rmExpanded .rmExpandRight
{
 background-image: url(Menu/ArrowExpandHovered.gif);
}

.RadMenu_Custom .rmGroup .rmLink:hover .rmExpandLeft,
.RadMenu_Custom .rmGroup .rmFocused .rmExpandLeft,
.RadMenu_Custom .rmGroup .rmExpanded .rmExpandLeft
{
 background-image: url(Menu/ArrowExpandHoveredRTL.gif);
}

/* </expand arrows styling> */

.RadMenu_Custom .rmHorizontal .rmItem 
{
    border-right: 1px solid #fff;
    padding-right: 10px;}
.RadMenu_Custom .rmHorizontal .rmLast { border-right: 0; }

.RadMenu_Custom .rmVertical .rmItem { border-bottom: 1px solid #353535; }
.RadMenu_Custom .rmVertical .rmLast { border-bottom: 0; }

.RadMenu_Custom_rtl .rmHorizontal .rmItem { border-left: 0; }

.RadMenu_Custom .rmRootGroup .rmGroup .rmItem,
.RadMenu_Custom_Context .rmGroup .rmItem
{ border-right: 0; border-bottom: 0; }

.RadMenu_Custom .rmGroup
{
 border: 1px solid #828282;
 background-color: #fff;
}

.RadMenu_Custom .rmGroup .rmExpanded
{
 z-index: 11;
}

.RadMenu_Custom .rmTopArrowDisabled,
.RadMenu_Custom .rmBottomArrowDisabled,
.RadMenu_Custom .rmLeftArrowDisabled,
.RadMenu_Custom .rmRightArrowDisabled
{
 display: none;
}

.RadMenu_Custom .rmTopArrow,
.RadMenu_Custom .rmBottomArrow,
.RadMenu_Custom .rmLeftArrow,
.RadMenu_Custom .rmRightArrow
{
 font-size: 0;
 line-height: 0;
 color: #fff;
}

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

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

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

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

.RadMenu_Custom .rmItem .rmDisabled .rmText
{
 color: #999;
}

.RadMenu_Custom .rmRootGroup .rmItem .rmDisabled
{
 background: none;
}

.RadMenu_Custom .rmGroup .rmItem .rmDisabled
{
 background-color: #fff;
}

.RadMenu_Custom .rmRootGroup .rmSeparator,
.RadMenu_Custom .rmGroup .rmSeparator
{
 background: #8f8f8f;
 border-top: 1px solid #676767;
 border-bottom: 0;
}

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

.RadMenu_Custom .rmHorizontal .rmSeparator
{
 height: 20px;
 width: 1px;
 line-height: 20px;
 border: 0;
}

.RadMenu_Custom .rmVertical .rmSeparator
{
 height: 1px;
 margin: 3px 0;
 border: 0;
 line-height: 1px;
}

.RadMenu_Custom .rmLeftImage
{
 margin: 2px;
}

.RadMenu_Custom .rmSlide
{
 margin: -1px 0 0 -1px !important;
}

* html .RadMenu_Custom .rmVertical .rmSlide
{
 margin-left: -2px !important;
}

* html .RadMenu_Custom .rmHorizontal .rmSlide
{
 margin-top: -2px !important;
}

.RadMenu_Custom_rtl .rmSlide
{
 margin: -1px 0 0 2px !important;
}

* html .RadMenu_Custom_rtl .rmVertical .rmSlide
{
 margin-left: 3px !important;
}

* html .RadMenu_Custom_rtl .rmHorizontal .rmSlide
{
 margin-top: -2px !important;
 margin-left: 0 !important;
}

.RadMenu_Custom .rmItem .rmDisabled:hover
{
 background: none;
}

[Yana]

Hello Donavon,

Please modify your css style for "rmExpandDown" class like this:

.RadMenu_Custom .rmHorizontal .rmExpandDown
{
  background: transparent url(Menu/RootGroupArrowDown.gif) no-repeat right center;
  display: inline-block !important;
}

I hope this helps.

Best wishes,
Yana
the Telerik team

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