Expand Arrow not showing up

2 posts, 0 answers
  1. AL
    AL avatar
    40 posts
    Member since:
    May 2008

    Posted 21 Oct 2009 Link to this post

    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;
    }
  2. AL
    AL avatar
    40 posts
    Member since:
    May 2008

    Posted 21 Oct 2009 Link to this post

    Found the solution:--

    Changed from :--
    .RadMenu_Blue .rmHorizontal .rmExpandBottom

    to:--


    .RadMenu_Blue .rmHorizontal .rmExpandDown


Back to Top