Arrow indicating children for submenu

16 posts, 0 answers
  1. matt Sword
    matt Sword avatar
    8 posts
    Member since:
    Mar 2010

    Posted 12 May 2010 Link to this post

    Hello all,

    I'm using the horizontal menu with drop downs.
    I've successfully deployed a custom CSS for my menu, however I can not figure out how to display the arrow effect when an item has children.
    I've found the css skin file selectors, and it looks like rmExpandLeft is the class to manipulate it, but when I add that element to the CSS file it doesn't do anything.
    I've compared the source for "Default" css and my custom css and the HTML output is the same; additionally, there is NO rmExpandLeft in the HTML, so I'm not sure how to determine if it has children.

    Any clues?

    Regards

    Matt
  3. Yana
    Admin
    Yana avatar
    5030 posts

    Posted 13 May 2010 Link to this post

    Hi Matt,

    Could you please open s support ticket and send us your custom skin there,  we'll modify it in order to show arrows? Thanks in advance

    Greetings,
    Yana
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  5. Jason Fedler
    Jason Fedler avatar
    7 posts
    Member since:
    Jan 2010

    Posted 17 May 2010 Link to this post

    I would be interested to know how this works as well! Thanks, jF
  7. Yana
    Admin
    Yana avatar
    5030 posts

    Posted 19 May 2010 Link to this post

    Hi Jason,

    The skin of the menu should be modified in order to add the arrows. Which skin you're using?

    Greetings,
    Yana
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  9. Jason Fedler
    Jason Fedler avatar
    7 posts
    Member since:
    Jan 2010

    Posted 19 May 2010 Link to this post

    I'm using the "Simple" skin, but there's not much of the original skin left untouched. I started out using the Style Builder on the website, but have since modified a lot of other CSS selectors and properties to narrow it down...it's 143 lines now with quite a few comment lines. Assuming the code would be helpful, here it is:
    /* <RadMenu / Simple> */ 
     
    /* padding is where left edge of Project Center starts */ 
    .RadMenu_pdeMainMenu ul.rmRootGroup,  
    .RadMenu_pdeMainMenu div.rmRootGroup  
    {  
        padding: 1px 0px;  
        background-image: none;  
    }  
     
    /* Main Menu Items */ 
    .RadMenu_pdeMainMenu,  
    .RadMenu_pdeMainMenu a.rmLink  
    {  
        font: normal 12px/19px "Tahoma", Geneva, sans-serif;  
        color: #58707E;  
    }  
     
    /*  */ 
    .RadMenu_pdeMainMenu .rmItem a.rmLink  
    {  
        padding: 2px 12px;  
        background-image:none;  
    }  
     
    /*  */ 
    .RadMenu_pdeMainMenu .rmItem a.rmLink .rmText  
    {  
        padding-right: 2px;  
        background-image: none;  
    }  
     
    /* breadcrumb background color stuff */ 
    .RadMenu_pdeMainMenu .rmItem a.rmLink:hover,  
    .RadMenu_pdeMainMenu .rmItem a.rmFocused,  
    .RadMenu_pdeMainMenu .rmItem a.rmSelected  
    .RadMenu_pdeMainMenu .rmItem a.rmExpanded,  
    .RadMenu_pdeMainMenu .rmItem a.rmExpanded:hover  
    {  
        background: #E5EDED;  
        background-image: none;  
        padding-bottom: 3px;  
    }  
     
    /* FINALLY - the breadcrumb text color */ 
    .RadMenu_pdeMainMenu .rmItem a.rmFocused .rmText   
    {  
        color: #A52A2A;  
    }  
     
    /*  */ 
    .RadMenu_pdeMainMenu .rmGroup .rmItem a.rmLink  
    {  
        padding: 1px;  
        margin: 1px 0px;  
    }  
     
    /* Hovered expanded menu items */ 
    .RadMenu_pdeMainMenu .rmGroup .rmItem a.rmLink:hover,  
    .RadMenu_pdeMainMenu .rmGroup .rmItem a.rmFocused,  
    .RadMenu_pdeMainMenu .rmGroup .rmItem a.rmSelected,  
    .RadMenu_pdeMainMenu .rmGroup .rmItem a.rmExpanded,  
    .RadMenu_pdeMainMenu .rmGroup .rmItem a.rmExpanded:hover  
    {  
        padding: 0px;  
        background-image: none;  
        background-color: #E5EDED;  
    }  
     
    /* Padding for submenu items */   
    .RadMenu_pdeMainMenu .rmGroup .rmItem a.rmLink .rmText  
    {  
        padding-right: 30px;  
    }  
     
    /* MainMenu background items */ 
     DIV.RadMenu_pdeMainMenu .rmRootGroup {  
        BORDER: 0px;  
        BACKGROUND-COLOR: #58707E;  
    }  
     
    /* MainMenu Text */ 
     DIV.RadMenu_pdeMainMenu .rmItem .rmLink {  
        LINE-HEIGHT: 19px;  
        COLOR: #FFFFFF;  
        FONT-SIZE: 14px;  
        FONT-WEIGHT: bold;  
    }  
     
    /* MainText entire-cell background highlighting */ 
     DIV.RadMenu_pdeMainMenu .rmItem .rmLink:hover {  
        BACKGROUND-COLOR: #B3CACD;  
        padding: 1px 12px 3px 12px;  
    }  
     
    /* Hover-over Text highlighting */ 
     DIV.RadMenu_pdeMainMenu .rmItem .rmLink:hover .rmText {  
        COLOR: #EA433A;  
        background-color: #B3CACD;  
        padding-top: 1px;  
        padding-bottom: 1px;  
    }  
     
    /* Highlight around main menu text upon entering a submenu */ 
     DIV.RadMenu_pdeMainMenu .rmItem .rmExpanded {  
        BACKGROUND-COLOR: #E5EDED;  
    }  
     
    /* Area directly around text (& text) upon entering a submenu */ 
     DIV.RadMenu_pdeMainMenu .rmItem .rmExpanded .rmText {  
        PADDING-BOTTOM: 1px;  
        padding-top: 0px;  
        COLOR: #58707E;  
    }  
     
    /* items on expanded (dropped down) menu items */ 
     DIV.RadMenu_pdeMainMenu .rmItem .rmGroup {  
        BACKGROUND-IMAGE: none;  
        BORDER: none;  
        PADDING-BOTTOM: 2px;  
        BACKGROUND-COLOR: #B3CACD;  
    }  
     
    /* area surrounding text on expanded (dropped down) menu items */ 
     DIV.RadMenu_pdeMainMenu .rmItem .rmGroup:hover .rmText:hover  
     {  
         background-color:#E5EDED;  
     }  
       
    /* spacing between items in expandedDown items */ 
     DIV.RadMenu_pdeMainMenu .rmGroup .rmItem .rmLink:hover {  
        BORDER: none;  
        MARGIN-TOP: 1px;  
        MARGIN-BOTTOM: 1px;  
        background-color: #E5EDED;  
    }  
     
    /* submenu items */ 
    DIV.RadMenu_pdeMainMenu .rmGroup .rmItem .rmFocused  
    {  
        padding: 1px;  
        padding-left: 0px;  
    } 

    Thank you,
    jF
  11. matt Sword
    matt Sword avatar
    8 posts
    Member since:
    Mar 2010

    Posted 19 May 2010 Link to this post

    jF,
    thanks for the sample
    Style Builder? where is that?

    Matt
  13. Jason Fedler
    Jason Fedler avatar
    7 posts
    Member since:
    Jan 2010

    Posted 19 May 2010 Link to this post

    Hey Matt,

    It's a pretty cool site - still in Beta, but it takes some of the work out of creating your own styles...http://stylebuilder.telerik.com/

    jF
  15. matt Sword
    matt Sword avatar
    8 posts
    Member since:
    Mar 2010

    Posted 19 May 2010 Link to this post

    hey thanks.

    I'm checking it out now. I appreciate it.
  17. Jason Fedler
    Jason Fedler avatar
    7 posts
    Member since:
    Jan 2010

    Posted 24 May 2010 Link to this post

    Fortunately, I only have one main menu item that has a child menu, so I moved it to the front of the pack and styled the .rmFirst CSS selector. I'd really like to know what selectors reference child menus, though. I've tried .rmGroup .rmExpand and  .rmRootGroup .rmExpand, but they didn't seem to work...
  19. matt Sword
    matt Sword avatar
    8 posts
    Member since:
    Mar 2010

    Posted 24 May 2010 Link to this post

    JF,

    So, I took your advice and looked at the stylebuilder. I downloaded the basic and just started messing with it to get my look and feel.
    Forgive me if some of this is obvious.
    1 ul.rmRootGroup, and  div.rmRootGroup = Controls all background colors borders etc
    2. a.rmlink = controls all colors of menu items even submenu

    I had tweaked  .rmItem a.rmLink:hover, .rmItem a.rmFocused, .rmItem a.rmSelected and
     .rmItem a.rmExpanded, .rmItem a.rmExpanded:hover to manipulate the mouse over and selected states

    For the submenu stuff I tweaked .rmGroup, .rmMultiColumn, .rmGroup .rmVertical
    and
    .RadMenu_cranel .rmTopFix,
    .RadMenu_cranel .rmBottomFix,
    .RadMenu_cranel .rmRoundedCorners .rmGroup .rmItem,
    .RadMenu_cranel .rmRoundedCorners li.rmFirstGroupColumn .rmItem,
    .RadMenu_cranel .rmRoundedCorners ul.rmHorizontal .rmFirst,
    .RadMenu_cranel_Context.rmRoundedCorners .rmGroup .rmItem,
    .RadMenu_cranel_Context.rmRoundedCorners ul.rmHorizontal .rmFirst

    to modify the color of the drop down links I changed .rmGroup .rmItem a.rmLink

    That is all I really did.
    I hope this makes sense.

    I was making the menus really odd colors so I knew where they were when I was changing them and then made comments in my CSS. I did eventually get there :)

    matt
  21. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 27 May 2010 Link to this post

    Hi Matt,

    Check this documentation article for more information on RadMenu CSS class names and what they control. The article is for older RadControls for ASP.NET AJAX versions, but still valid for simple scenarios.

    All the best,
    Kamen Bundev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  23. Jason Fedler
    Jason Fedler avatar
    7 posts
    Member since:
    Jan 2010

    Posted 01 Jul 2010 Link to this post

    Hey Matt,

    Do you happen to have a externally browsable link you could share with me? I've made a concession to move the arrow to the first menu item and used rm.First to style accordingly, so it only styles (mostly) correct on the first menu item. For now, it's the only menu item that has a submenu, though, so it's OK. But I would really like to know how to make this work properly.

    Thanks,
    Jason
  25. matt Sword
    matt Sword avatar
    8 posts
    Member since:
    Mar 2010

    Posted 01 Jul 2010 Link to this post

    Jason -

    I don't have an external example that is public. I will attach my style sheet and you can use that. You should be able to attach that to the menu control.  Let me know how this works out.
    Matt
    /* <RadMenu / Simple> */ 
     
    .RadMenu_cranel ul.rmRootGroup, 
    .RadMenu_cranel div.rmRootGroup 
    { 
        padding: 1px 0; 
        border: 1px solid #91A6BC; 
        background-color: #91A6BC; /*Bacground for all menu */ 
    } 
     
    /* <Root items> */ 
     
    .RadMenu_cranel, 
    .RadMenu_cranel a.rmLink 
    { 
        font: normal 12px/19px "Segoe UI", Arial, sans-serif; 
        color: white; /* color for items in menu */ 
        text-decoration: none; 
    } 
     
    .RadMenu_cranel .rmItem a.rmLink 
    { 
        padding: 1px 12px; 
    } 
     
    .RadMenu_cranel .rmItem a.rmLink .rmText 
    { 
        padding-right: 0; 
    } 
    /* custom style */ 
     
    .RadMenu_cranel .rmItem a.rmLink:hover, 
    .RadMenu_cranel .rmItem a.rmFocused, 
    .RadMenu_cranel .rmItem a.rmSelected 
    { 
         background: #CEDAE7; /*selected color */ 
        border: 1px solid #3F464E; 
        padding: 0 11px; 
        color:#69829D; 
         
    } 
     
    .RadMenu_cranel .rmItem a.rmExpanded, 
    .RadMenu_cranel .rmItem a.rmExpanded:hover 
    { 
        background: #CEDAE7; /* mouse over events */ 
        border: 1px solid #3F464E; 
        padding: 0 11px; 
    } 
     
    .RadMenu_cranel .rmItem a.rmDisabled, 
    .RadMenu_cranel .rmItem a.rmDisabled:hover 
    { 
        color: #7d7d7d; 
        background-color: transparent; 
        border: 0; 
        padding: 1px 12px; 
    } 
     
    .RadMenu_cranel img.rmLeftImage 
    { 
        margin: 2px 2px 0 0; 
        padding-bottom: 3px; 
    } 
     
    /* </Root items> */ 
     
     
    /* <Submenu items> */ 
     
    .RadMenu_cranel .rmGroup, 
    .RadMenu_cranel .rmMultiColumn, 
    .RadMenu_cranel .rmGroup .rmVertical 
    { 
        border: 1px solid #616161; 
        background: #fff url('Images/rmDropDownStripe.png') repeat-y -1px 0;     
    } 
     
    .RadMenu_cranel .rmTopFix, 
    .RadMenu_cranel .rmBottomFix, 
    .RadMenu_cranel .rmRoundedCorners .rmGroup .rmItem, 
    .RadMenu_cranel .rmRoundedCorners li.rmFirstGroupColumn .rmItem, 
    .RadMenu_cranel .rmRoundedCorners ul.rmHorizontal .rmFirst, 
    .RadMenu_cranel_Context.rmRoundedCorners .rmGroup .rmItem, 
    .RadMenu_cranel_Context.rmRoundedCorners ul.rmHorizontal .rmFirst 
    { 
        background-image: url('Images/rmDropDownStripe.png'); 
        background-color: #fff;  
        background-repeat: repeat-y; 
        background-position: -3px 0; 
    } 
     
    * html .rmRoundedCorners_cranel .rmGroup .rmItem, 
    * html .rmRoundedCorners_cranel ul.rmHorizontal .rmFirst 
    { 
        background-image: url('Images/rmDropDownStripe.png'); 
        background-color: #fff;  
        background-repeat: repeat-y; 
        background-position: -3px 0; 
    } 
     
    .RadMenu_cranel .rmRoundedCorners .rmScrollWrapContainer .rmGroup, 
    .RadMenu_cranel .rmRoundedCorners .rmScrollWrap .rmItem, 
    .RadMenu_cranel .rmRoundedCorners .rmGroupColumn .rmItem, 
    .RadMenu_cranel .rmRoundedCorners .rmHorizontal .rmItem, 
    .RadMenu_cranel .rmRoundedCorners .rmScrollWrap .rmVertical, 
    .RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrapContainer .rmGroup, 
    .RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrap .rmItem, 
    .RadMenu_cranel_Context.rmRoundedCorners .rmHorizontal .rmItem, 
    .RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrap .rmVertical 
    { 
        background-image: none; 
    } 
     
    * html .rmRoundedCorners_cranel .rmScrollWrapContainer .rmGroup, 
    * html .rmRoundedCorners_cranel .rmScrollWrap .rmItem, 
    * html .rmRoundedCorners_cranel .rmHorizontal .rmItem, 
    * html .rmRoundedCorners_cranel .rmScrollWrap .rmVertical 
    { 
        background-image: none; 
    } 
     
    .RadMenu_cranel .rmRoundedCorners .rmGroupColumn 
    { 
        background-color: #fff; 
    } 
     
    .RadMenu_cranel .rmBottomLeft, 
    .RadMenu_cranel .rmRoundedCorners .rmScrollWrapContainer, 
    .RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrapContainer, 
    .RadMenu_cranel_Context.rmRoundedCorners ul.rmGroup, 
    .RadMenu_cranel .rmRoundedCorners ul.rmGroup, 
    .RadMenu_cranel .rmRoundedCorners .rmMultiColumn 
    { 
        background-image:  url('Images/rmRoundedLeft.png'); 
        background-color: transparent;  
        background-repeat: no-repeat; 
    } 
     
    * html .rmRoundedCorners_cranel .rmScrollWrapContainer, 
    * html .rmRoundedCorners_cranel .rmGroup ul.rmGroup, 
    * html .rmRoundedCorners_cranel ul.rmGroup 
    { 
        background-image:  url('Images/rmRoundedLeft.png'); 
        background-color: transparent;  
        background-repeat: no-repeat; 
    } 
     
    .RadMenu_cranel .rmTopRight, 
    .RadMenu_cranel .rmBottomRight 
    { 
        background-image:  url('Images/rmRoundedRight.png'); 
        background-color: transparent;  
        background-repeat: no-repeat; 
    } 
     
    .RadMenu_cranel .rmTopFix, 
    .RadMenu_cranel .rmBottomFix, 
    .RadMenu_cranel .rmRoundedCorners .rmGroup .rmFirst, 
    .RadMenu_cranel_Context.rmRoundedCorners .rmGroup .rmFirst, 
    .rmRoundedCorners_cranel .rmGroup .rmFirst 
    { 
        border-color: #616161; 
    } 
     
    .RadMenu_cranel .rmRoundedCorners .rmScrollWrapContainer .rmTopFix, 
    .RadMenu_cranel .rmRoundedCorners .rmScrollWrapContainer .rmBottomFix, 
    .RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopFix, 
    .RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomFix 
    { 
        background: #FFF; 
    } 
     
    * html .rmRoundedCorners_cranel .rmScrollWrapContainer .rmTopFix, 
    * html .rmRoundedCorners_cranel .rmScrollWrapContainer .rmBottomFix 
    { 
        background: #FFF; 
    } 
     
    .RadMenu_cranel .rmRoundedCorners .rmScrollWrapContainer .rmTopArrow, 
    .RadMenu_cranel .rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow, 
    .RadMenu_cranel .rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow, 
    .RadMenu_cranel .rmRoundedCorners .rmScrollWrapContainer .rmRightArrow, 
    .RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopArrow, 
    .RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow, 
    .RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow, 
    .RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrapContainer .rmRightArrow 
    { 
        background-color: #FFF; 
        border: 0; 
    } 
     
    * html .rmRoundedCorners_cranel .rmScrollWrapContainer .rmTopArrow, 
    * html .rmRoundedCorners_cranel .rmScrollWrapContainer .rmBottomArrow, 
    * html .rmRoundedCorners_cranel .rmScrollWrapContainer .rmLeftArrow, 
    * html .rmRoundedCorners_cranel .rmScrollWrapContainer .rmRightArrow 
    { 
        background-color: #FFF; 
        border: 0; 
    } 
     
    .RadMenu_cranel li.rmTopFix, 
    .RadMenu_cranel li.rmBottomFix 
    { 
        background-position: -4px 0; 
    } 
     
    .RadMenu_cranel_rtl .rmBottomLeft, 
    .RadMenu_cranel_rtl .rmRoundedCorners ul.rmGroup, 
    .RadMenu_cranel_rtl .rmRoundedCorners .rmMultiColumn, 
    .RadMenu_cranel .rmRoundedCorners .rmScrollWrapContainer, 
    .RadMenu_cranel .rmScrollWrapContainer .rmBottomLeft, 
    .rmRoundedCorners.RadMenu_cranel_Context_rtl ul.rmGroup, 
    .RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrapContainer 
    { 
        background-image: url('Images/rmRoundedLeft_rtl.png'); 
    } 
     
    .RadMenu_cranel_rtl .rmTopRight, 
    .RadMenu_cranel_rtl .rmBottomRight 
    { 
        background-image: url('Images/rmRoundedRight_rtl.png'); 
    } 
     
    .RadMenu_cranel_rtl li.rmTopFix, 
    .RadMenu_cranel_rtl li.rmBottomFix, 
    .RadMenu_cranel_rtl .rmRoundedCorners .rmGroup .rmItem, 
    .rmRoundedCorners.RadMenu_cranel_Context_rtl .rmGroup .rmItem 
    { 
        background-position: 101% 0; 
    } 
     
    .RadMenu_cranel .rmGroup .rmHorizontal 
    { 
        background: #fff; 
    } 
     
    .RadMenu_cranel .rmRoundedCorners .rmScrollWrapContainer li.rmItem, 
    .RadMenu_cranel_Context.rmRoundedCorners .rmScrollWrapContainer li.rmItem, 
    .rmRoundedCorners_cranel .rmScrollWrapContainer li.rmItem 
    { 
        background: none; 
    } 
     
    .RadMenu_cranel .rmGroup .rmItem a.rmLink 
    { 
        padding: 1px; 
        margin: 1px 0; 
        color:#69829D; 
    } 
     
    .RadMenu .rmGroup .rmItem .rmLeftImage 
    { 
        margin: 2px 0 0 6px; 
    } 
     
    * html .RadMenu .rmGroup .rmItem .rmLeftImage { margin: 2px 0 0 3px; } 
    *+html .RadMenu .rmGroup .rmItem .rmLeftImage { margin: 2px 0 0 3px; } 
     
    .RadMenu_cranel .rmGroup .rmItem a.rmLink:hover, 
    .RadMenu_cranel .rmGroup .rmItem a.rmFocused, 
    .RadMenu_cranel .rmGroup .rmItem a.rmSelected, 
    .RadMenu_cranel .rmGroup .rmItem a.rmExpanded, 
    .RadMenu_cranel .rmGroup .rmItem a.rmExpanded:hover 
    { 
        padding: 0; 
    } 
     
    .RadMenu_cranel .rmGroup .rmItem a.rmDisabled, 
    .RadMenu_cranel .rmGroup .rmItem a.rmDisabled:hover 
    { 
        padding: 1px; 
    } 
     
    .RadMenu_cranel .rmGroup .rmItem a.rmLink .rmText 
    { 
        padding-right: 53px; 
    } 
     
    .RadMenu_cranel .rmGroup .rmHorizontal a.rmLink .rmText 
    { 
        padding-right: 10px; 
    } 
     
    .RadMenu_cranel .rmGroup .rmExpandRight, 
    .RadMenu_cranel .rmGroup .rmExpandLeft, 
    .RadMenu_cranel .rmTopArrow, 
    .RadMenu_cranel .rmBottomArrow, 
    .RadMenu_cranel .rmLeftArrow, 
    .RadMenu_cranel .rmRightArrow 
    { 
        background: transparent url('Images/rmExpandArrows.png') no-repeat; 
    } 
     
    .RadMenu_cranel .rmGroup .rmExpandRight { background-position: 100% 0; } 
    .RadMenu_cranel .rmGroup .rmExpandLeft { background-position: 0 -48px; } 
    .RadMenu_cranel a.rmLink:hover .rmExpandRight, 
    .RadMenu_cranel a.rmFocused .rmExpandRight, 
    .RadMenu_cranel a.rmSelected .rmExpandRight, 
    .RadMenu_cranel a.rmExpanded .rmExpandRight { background-position: 100% -24px; } 
    .RadMenu_cranel a.rmLink:hover .rmExpandLeft, 
    .RadMenu_cranel a.rmFocused .rmExpandLeft, 
    .RadMenu_cranel a.rmSelected .rmExpandLeft, 
    .RadMenu_cranel a.rmExpanded .rmExpandLeft { background-position: 0 -72px; } 
     
    .RadMenu_cranel .rmTopArrow, 
    .RadMenu_cranel .rmBottomArrow, 
    .RadMenu_cranel .rmLeftArrow, 
    .RadMenu_cranel .rmRightArrow 
    { 
        background-color: #fff; 
    } 
     
    .RadMenu_cranel .rmTopArrow 
    { 
        border-bottom: 1px solid #616161; 
        background-position: 50% -95px; 
    } 
     
    .RadMenu_cranel .rmBottomArrow 
    { 
        border-top: 1px solid #616161; 
        background-position: 50% -109px; 
    } 
     
    .RadMenu_cranel .rmLeftArrow 
    { 
        border-right: 1px solid #616161; 
        background-position: 50% -48px; 
    } 
     
    .RadMenu_cranel .rmRightArrow 
    { 
        border-left: 1px solid #616161; 
        background-position: 50% 1px; 
    } 
     
    .RadMenu_cranel .rmVertical li.rmSeparator, 
    .RadMenu_cranel .rmHorizontal .rmVertical li.rmSeparator 
    { 
        border-left: 0; 
        border-right: 0; 
    } 
     
    .RadMenu_cranel .rmVertical li.rmSeparator .rmText, 
    .RadMenu_cranel .rmHorizontal .rmVertical li.rmSeparator .rmText 
    { 
        background: #616161; 
        padding-bottom: 1px; 
        margin-top: 2px; 
    } 
     
    .RadMenu_cranel .rmHorizontal li.rmSeparator .rmText, 
    .RadMenu_cranel .rmVertical .rmHorizontal li.rmSeparator .rmText 
    { 
        background: #616161; 
        width: 1px; 
        margin-left: 1px; 
    } 
     
    /* <rtl> */ 
     
    .RadMenu_cranel_rtl .rmGroup, 
    .RadMenu_cranel_rtl .rmGroup .rmVertical 
    { 
        background-position: 101% 0; 
    } 
     
    .RadMenu_cranel_rtl .rmGroup .rmItem a.rmLink .rmText 
    { 
        padding-left: 53px; 
        padding-right: 27px; 
    } 
     
    .RadMenu_cranel_rtl .rmGroup .rmHorizontal a.rmLink .rmText 
    { 
        padding-left: 10px; 
        padding-right: 9px; 
    } 
     
    /* </rtl> */ 
     
    .RadMenu_cranel .rmScrollWrap .rmVertical 
    { 
        border: 0; 
    } 
     
    /* </RadMenu / Simple> */ 
     

  27. Jason Fedler
    Jason Fedler avatar
    7 posts
    Member since:
    Jan 2010

    Posted 01 Jul 2010 Link to this post

    Thank you, sir. I shall take a look!
  29. matt Sword
    matt Sword avatar
    8 posts
    Member since:
    Mar 2010

    Posted 09 Jul 2010 Link to this post

    Jason -

    Did you ever get your CSS figured out?

    Matt
  31. Jason Fedler
    Jason Fedler avatar
    7 posts
    Member since:
    Jan 2010

    Posted 12 Jul 2010 Link to this post

    Hey Matt,

    Thanks for keeping me honest. haha
    And to continue to be honest, I haven't worked with it as I've been side-tracked with some other coding stuff... I will definitely keep this forum as the log of my work, though, and I *really* appreciate your help! I did notice, though, that it is not rendering quite right in IE8...but we're targeting IE7 for now...

    Jason
  32.
Back to Top