Need to separate groups of menu items

2 posts, 0 answers
  1. Lynn
    Lynn avatar
    186 posts
    Member since:
    Sep 2006

    Posted 03 Mar 2011 Link to this post

    I am styling the Telerik menu using only CSS (no skins).  It is working fine and the results are good, except...I would like to visually separate cascading groups.

    I have attached a small screen capture of the current menu with the "Buy" menu selected, and the detail "Search..." item selected.  The items to the right (Search by City, Search by Zip Code, etc.) are items under "Search...".

    I would like to visually separate the lower level group (Search by City, Search by Zip Code, etc.) from the second level (Search..., Buying a Home, etc.) with a small (say 3 or 4 pixel) gap where the RED line is drawn on the graphic.

    I should probably add that I am NOT setting the width of the items, I am letting the width "float" automatically based on the text contents.

    Can you tell me how I can do this using CSS?

    Thank you in advance for the assistance!

  2. Kate
    Kate avatar
    1898 posts

    Posted 07 Mar 2011 Link to this post

    Hello Lynn,

    One way to achieve this is to set the following css class selector to the level you need (one, two etc.):
    Copy Code
    .RadMenu_Default .rmLevel2
                left: 15px !important;

    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Back to Top