I have a horizontal menu and I am not able to display the "down arrow gif" on a root menu item which has child items. How would a user know if one of the root menu item has child items if the down arrow is not showing up? I need to display down arrow on a root menu items that has child items. Any help would be great, because I am stuck for 8 hours in it.
Here is my css:-----------------------------------------------------------------------------------------
/* r.a.d.menu Web 2.0 skin */
.RadMenu_Blue
{
background: url(Menu/MenuItemBackground.gif);
border-left: solid 1px #617fb5;
}
.RadMenu_Blue_Context
{
background: none;
border:0;
}
.RadMenu_Blue .rmLink
{
text-decoration: none;
color: #fff;
border-left: solid 1px #c1d3ea;
border-right: solid 1px #1d4375;
background: transparent;
}
.RadMenu_Blue .rmLink:hover,
.RadMenu_Blue .rmFocused,
.RadMenu_Blue .rmExpanded
{
color: #FFFFFF;
background: transparent url(Menu/MainItemBackgroundHover.gif) no-repeat center;
height:28px;
}
.RadMenu_Blue .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: 26px;
padding-right: 24px;
}
.RadMenu_Blue .rmRootGroup .rmText .rmLeftImage
{
margin: 3px 1px 0; /* should be adjusted to the size of the images, if they are larger than 16x16px */
}
.RadMenu_Blue .rmHorizontal .rmExpandBottom
{
background: transparent url(Menu/RootGroupArrowDown.gif) no-repeat right center;
}
.RadMenu_Blue .rmHorizontal .rmExpandTop
{
background: transparent url(Menu/RootGroupArrowDown.gif) no-repeat right center;
}
.RadMenu_Blue .rmVertical .rmExpandLeft,
.RadMenu_Blue .rmVertical .rmExpandRight
{
background: transparent url(Menu/invertedGroupImage.gif) no-repeat right center;
}
.RadMenu_Blue .rmSlide
{
margin-top:-1px;
}
.RadMenu_Blue .rmGroup
{
border: solid 1px #6788be;
background: white;
}
.RadMenu_Blue .rmGroup .rmLink
{
background: white;
border: 0px;
border-bottom: solid 1px #f0f2f3;
color: #333;
}
.RadMenu_Blue .rmGroup .rmText
{
font-weight: normal !important;
background: none;
margin-right: 0 !important;
padding-left: 30px;
padding-right: 40px;
font-size: 11px;
}
.RadMenu_Blue .rmGroup .rmLink:hover,
.RadMenu_Blue .rmGroup .rmFocused,
.RadMenu_Blue .rmGroup .rmExpanded
{
background: #e7f1ff;
border: 0;
border-bottom: solid 1px #d8dde0;
}
.RadMenu_Blue .rmLeftArrow,
.RadMenu_Blue .rmRightArrow,
.RadMenu_Blue .rmTopArrow,
.RadMenu_Blue .rmBottomArrow,
.RadMenu_Blue .rmLeftArrowDisabled,
.RadMenu_Blue .rmRightArrowDisabled,
.RadMenu_Blue .rmTopArrowDisabled,
.RadMenu_Blue .rmBottomArrowDisabled
{
background: #e7f1ff url(Menu/left.gif) center center no-repeat;
width: 15px;
text-decoration:none;
color:#e7f1ff;
}
.RadMenu_Blue .rmTopArrow,
.RadMenu_Blue .rmTopArrowDisabled
{
background-image: url(Menu/top.gif);
width: 100%;
height: 15px;
}
.RadMenu_Blue .rmBottomArrow,
.RadMenu_Blue .rmBottomArrowDisabled
{
background-image:url(Menu/bottom.gif);
width: 100%;
height: 15px;
}
.RadMenu_Blue .rmRightArrow,
.RadMenu_Blue .rmLeftArrow
{
height: 100%;
}
.RadMenu_Blue .rmRightArrow,
.RadMenu_Blue .rmRightArrowDisabled
{
background-image: url(Menu/right.gif);
}
.RadMenu_Blue .rmVertical .rmSeparator
{
padding-top: 2px;
background: #6788be;
font-size: 1px;
line-height: 1px;
}
.RadMenu_Blue .rmSeparator .rmText
{
display: none;
}
.RadMenu_Blue .rmExpandLeft,
.RadMenu_Blue .rmExpandRight,
.RadMenu_Blue .rmFocused .rmExpandLeft,
.RadMenu_Blue .rmFocused .rmExpandRight,
.RadMenu_Blue .rmExpanded .rmExpandLeft,
.RadMenu_Blue .rmExpanded .rmExpandRight
{
background: transparent url(Menu/invertedGroupImage.gif) right center no-repeat;
}
.RadMenu_Blue .rmGroup .rmExpandLeft,
.RadMenu_Blue .rmGroup .rmExpandRight,
.RadMenu_Blue .rmGroup .rmFocused .rmExpandLeft,
.RadMenu_Blue .rmGroup .rmFocused .rmExpandRight,
.RadMenu_Blue .rmGroup .rmExpanded .rmExpandLeft,
.RadMenu_Blue .rmGroup .rmExpanded .rmExpandRight
{
background: transparent url(Menu/groupImage.gif) right center no-repeat;
}
/*right-to-left support*/
.RadMenu_Blue_rtl,
.RadMenu_Blue_rtl *
{
text-align:right;
}
.RadMenu_Blue_rtl .rmRootGroup .rmText
{
padding-left: 24px;
padding-right: 8px;
margin-right: 0;
margin-left: 4px;
}
.RadMenu_Blue_rtl .rmGroup .rmText
{
margin-left: 0 !important;
padding-left: 40px;
padding-right: 30px;
}
.RadMenu_Blue .rmLeftImage
{
margin: 5px 2px 0;
}
.RadMenu_Blue_rtl .rmHorizontal .rmExpandBottom,
.RadMenu_Blue_rtl .rmHorizontal .rmExpandTop
{
background-position:left center;
}
.RadMenu_Blue_rtl .rmVertical .rmExpandLeft,
.RadMenu_Blue_rtl .rmVertical .rmExpandRight
{
background: transparent url(Menu/invertedGroupImageRTL.gif) no-repeat left center;
}
.RadMenu_Blue_rtl .rmGroup .rmExpandLeft,
.RadMenu_Blue_rtl .rmGroup .rmExpandRight
{
background: transparent url(Menu/groupImageRTL.gif) no-repeat 5px center;
}
.RadMenu_Blue_rtl .rmVertical .rmLink:hover .rmExpandLeft,
.RadMenu_Blue_rtl .rmVertical .rmLink:hover .rmExpandRight,
.RadMenu_Blue_rtl .rmVertical .rmFocused .rmExpandLeft,
.RadMenu_Blue_rtl .rmVertical .rmFocused .rmExpandRight,
.RadMenu_Blue_rtl .rmVertical .rmExpanded .rmExpandLeft,
.RadMenu_Blue_rtl .rmVertical .rmExpanded .rmExpandRight
{
background: transparent url(Menu/invertedGroupImageRTL.gif) left center no-repeat;
}
.RadMenu_Blue_rtl .rmGroup .rmLink:hover .rmExpandLeft,
.RadMenu_Blue_rtl .rmGroup .rmLink:hover .rmExpandRight,
.RadMenu_Blue_rtl .rmGroup .rmFocused .rmExpandLeft,
.RadMenu_Blue_rtl .rmGroup .rmFocused .rmExpandRight,
.RadMenu_Blue_rtl .rmGroup .rmExpanded .rmExpandLeft,
.RadMenu_Blue_rtl .rmGroup .rmExpanded .rmExpandRight
{
background: transparent url(Menu/groupImageRTL.gif) 5px center no-repeat;
}
.RadMenu_Blue .rmRootGroup .rmItem .rmDisabled,
.RadMenu_Blue .rmRootGroup .rmItem .rmDisabled:hover
{
-moz-opacity: 0.8;
opacity: 0.8;
color: #ccc;
background: none;
border-bottom-color: #f3f5f5;
}
Here is my css:-----------------------------------------------------------------------------------------
/* r.a.d.menu Web 2.0 skin */
.RadMenu_Blue
{
background: url(Menu/MenuItemBackground.gif);
border-left: solid 1px #617fb5;
}
.RadMenu_Blue_Context
{
background: none;
border:0;
}
.RadMenu_Blue .rmLink
{
text-decoration: none;
color: #fff;
border-left: solid 1px #c1d3ea;
border-right: solid 1px #1d4375;
background: transparent;
}
.RadMenu_Blue .rmLink:hover,
.RadMenu_Blue .rmFocused,
.RadMenu_Blue .rmExpanded
{
color: #FFFFFF;
background: transparent url(Menu/MainItemBackgroundHover.gif) no-repeat center;
height:28px;
}
.RadMenu_Blue .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: 26px;
padding-right: 24px;
}
.RadMenu_Blue .rmRootGroup .rmText .rmLeftImage
{
margin: 3px 1px 0; /* should be adjusted to the size of the images, if they are larger than 16x16px */
}
.RadMenu_Blue .rmHorizontal .rmExpandBottom
{
background: transparent url(Menu/RootGroupArrowDown.gif) no-repeat right center;
}
.RadMenu_Blue .rmHorizontal .rmExpandTop
{
background: transparent url(Menu/RootGroupArrowDown.gif) no-repeat right center;
}
.RadMenu_Blue .rmVertical .rmExpandLeft,
.RadMenu_Blue .rmVertical .rmExpandRight
{
background: transparent url(Menu/invertedGroupImage.gif) no-repeat right center;
}
.RadMenu_Blue .rmSlide
{
margin-top:-1px;
}
.RadMenu_Blue .rmGroup
{
border: solid 1px #6788be;
background: white;
}
.RadMenu_Blue .rmGroup .rmLink
{
background: white;
border: 0px;
border-bottom: solid 1px #f0f2f3;
color: #333;
}
.RadMenu_Blue .rmGroup .rmText
{
font-weight: normal !important;
background: none;
margin-right: 0 !important;
padding-left: 30px;
padding-right: 40px;
font-size: 11px;
}
.RadMenu_Blue .rmGroup .rmLink:hover,
.RadMenu_Blue .rmGroup .rmFocused,
.RadMenu_Blue .rmGroup .rmExpanded
{
background: #e7f1ff;
border: 0;
border-bottom: solid 1px #d8dde0;
}
.RadMenu_Blue .rmLeftArrow,
.RadMenu_Blue .rmRightArrow,
.RadMenu_Blue .rmTopArrow,
.RadMenu_Blue .rmBottomArrow,
.RadMenu_Blue .rmLeftArrowDisabled,
.RadMenu_Blue .rmRightArrowDisabled,
.RadMenu_Blue .rmTopArrowDisabled,
.RadMenu_Blue .rmBottomArrowDisabled
{
background: #e7f1ff url(Menu/left.gif) center center no-repeat;
width: 15px;
text-decoration:none;
color:#e7f1ff;
}
.RadMenu_Blue .rmTopArrow,
.RadMenu_Blue .rmTopArrowDisabled
{
background-image: url(Menu/top.gif);
width: 100%;
height: 15px;
}
.RadMenu_Blue .rmBottomArrow,
.RadMenu_Blue .rmBottomArrowDisabled
{
background-image:url(Menu/bottom.gif);
width: 100%;
height: 15px;
}
.RadMenu_Blue .rmRightArrow,
.RadMenu_Blue .rmLeftArrow
{
height: 100%;
}
.RadMenu_Blue .rmRightArrow,
.RadMenu_Blue .rmRightArrowDisabled
{
background-image: url(Menu/right.gif);
}
.RadMenu_Blue .rmVertical .rmSeparator
{
padding-top: 2px;
background: #6788be;
font-size: 1px;
line-height: 1px;
}
.RadMenu_Blue .rmSeparator .rmText
{
display: none;
}
.RadMenu_Blue .rmExpandLeft,
.RadMenu_Blue .rmExpandRight,
.RadMenu_Blue .rmFocused .rmExpandLeft,
.RadMenu_Blue .rmFocused .rmExpandRight,
.RadMenu_Blue .rmExpanded .rmExpandLeft,
.RadMenu_Blue .rmExpanded .rmExpandRight
{
background: transparent url(Menu/invertedGroupImage.gif) right center no-repeat;
}
.RadMenu_Blue .rmGroup .rmExpandLeft,
.RadMenu_Blue .rmGroup .rmExpandRight,
.RadMenu_Blue .rmGroup .rmFocused .rmExpandLeft,
.RadMenu_Blue .rmGroup .rmFocused .rmExpandRight,
.RadMenu_Blue .rmGroup .rmExpanded .rmExpandLeft,
.RadMenu_Blue .rmGroup .rmExpanded .rmExpandRight
{
background: transparent url(Menu/groupImage.gif) right center no-repeat;
}
/*right-to-left support*/
.RadMenu_Blue_rtl,
.RadMenu_Blue_rtl *
{
text-align:right;
}
.RadMenu_Blue_rtl .rmRootGroup .rmText
{
padding-left: 24px;
padding-right: 8px;
margin-right: 0;
margin-left: 4px;
}
.RadMenu_Blue_rtl .rmGroup .rmText
{
margin-left: 0 !important;
padding-left: 40px;
padding-right: 30px;
}
.RadMenu_Blue .rmLeftImage
{
margin: 5px 2px 0;
}
.RadMenu_Blue_rtl .rmHorizontal .rmExpandBottom,
.RadMenu_Blue_rtl .rmHorizontal .rmExpandTop
{
background-position:left center;
}
.RadMenu_Blue_rtl .rmVertical .rmExpandLeft,
.RadMenu_Blue_rtl .rmVertical .rmExpandRight
{
background: transparent url(Menu/invertedGroupImageRTL.gif) no-repeat left center;
}
.RadMenu_Blue_rtl .rmGroup .rmExpandLeft,
.RadMenu_Blue_rtl .rmGroup .rmExpandRight
{
background: transparent url(Menu/groupImageRTL.gif) no-repeat 5px center;
}
.RadMenu_Blue_rtl .rmVertical .rmLink:hover .rmExpandLeft,
.RadMenu_Blue_rtl .rmVertical .rmLink:hover .rmExpandRight,
.RadMenu_Blue_rtl .rmVertical .rmFocused .rmExpandLeft,
.RadMenu_Blue_rtl .rmVertical .rmFocused .rmExpandRight,
.RadMenu_Blue_rtl .rmVertical .rmExpanded .rmExpandLeft,
.RadMenu_Blue_rtl .rmVertical .rmExpanded .rmExpandRight
{
background: transparent url(Menu/invertedGroupImageRTL.gif) left center no-repeat;
}
.RadMenu_Blue_rtl .rmGroup .rmLink:hover .rmExpandLeft,
.RadMenu_Blue_rtl .rmGroup .rmLink:hover .rmExpandRight,
.RadMenu_Blue_rtl .rmGroup .rmFocused .rmExpandLeft,
.RadMenu_Blue_rtl .rmGroup .rmFocused .rmExpandRight,
.RadMenu_Blue_rtl .rmGroup .rmExpanded .rmExpandLeft,
.RadMenu_Blue_rtl .rmGroup .rmExpanded .rmExpandRight
{
background: transparent url(Menu/groupImageRTL.gif) 5px center no-repeat;
}
.RadMenu_Blue .rmRootGroup .rmItem .rmDisabled,
.RadMenu_Blue .rmRootGroup .rmItem .rmDisabled:hover
{
-moz-opacity: 0.8;
opacity: 0.8;
color: #ccc;
background: none;
border-bottom-color: #f3f5f5;
}