Submenus with RadMenu CSS

5 posts, 0 answers
  1. Steven
    Steven avatar
    8 posts
    Member since:
    Jun 2008

    Posted 05 Jun 2010 Link to this post

    I used a previous example of how to use CSS to format the RadMenu and it has worked for the most part.  I am having trouble with two different items. The first is it appears that I have a separator and I can't figure out how to get rid of it - I tried in the css to make border 0 and width 0 but that did not seem to help.  The bigger issue is how to get the background down to the second level.  The css works great for the root and 1st level but I cannot figure out how to get the second level menu to have the same background.  Finally, is there a way to get the right arrows that show a sub menu to be a different color (or change the image)?

    The image of what I'm getting is an attachment.

    Here is the css I'm using:

     

    div.RadMenu_Default ul.rmRootGroup

     

    {

     

    background:#344A7C url(App_Themes/Default/images/menu_bg.jpg) top left repeat-x;

     

     

    border: 0;

     

    }

     

    div.RadMenu_Default .rmHorizontal .rmSeparator

     

    {

     

    width:0px;

     

     

    border:0px;

     

    }

     

    div.RadMenu_Default .rmRootGroup .rmLink

     

    {

     

    font-weight: bold;

     

     

    line-height:30px;

     

     

    font-size: 12pt;

     

     

    color: #fff;

     

    }

     

    div.RadMenu_Default .rmItem .rmLink:hover,

     

     

    div.RadMenu_Default .rmItem .rmFocused,

     

     

    div.RadMenu_Default .rmItem .rmSelected,

     

     

    div.RadMenu_Default .rmItem .rmExpanded {

     

     

    background:#344A7C url(App_Themes/Default/images/menu_bg.jpg) top left repeat-x;

     

     

    border: 0;

     

     

    color: yellow;

     

    }

     

    /*for subitems */

     

     

    div.RadMenu_Default ul.rmGroup

     

    {

     

    background:#344A7C url(App_Themes/Default/images/menu_hover.jpg) top left repeat-x;

     

    }

     

    div.RadMenu_Default .rmGroup .rmLink

     

    {

     

    font-weight:normal;

     

     

    line-height:24px;

     

     

    font-size: 10pt;

     

     

    color: red;

     

    }

     

    div.RadMenu_Default .rmGroup .rmItem .rmLink:hover,

     

     

    div.RadMenu_Default .rmGroup .rmItem .rmFocused,

     

     

    div.RadMenu_Default .rmGroup .rmItem .rmSelected,

     

     

    div.RadMenu_Default .rmGroup .rmItem .rmExpanded {

     

     

    background:#344A7C url(App_Themes/Default/images/menu_bg.jpg) top left repeat-x;

     

     

    border: 0;

     

     

    color: yellow;

     

    }



    any help you can provide will be greatly appreciated.

    Thanks,

    Steve
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 10 Jun 2010 Link to this post

    Hi Steven,

    To remove the separators, try adding background-position:1000px 0; to your div.RadMenu_Default .rmRootGroup .rmLink rule.

    As for the second question - can you send me those images you are using, so I can properly test how your overrides behave? Thank you in advance.

    Regards,
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steven
    Steven avatar
    8 posts
    Member since:
    Jun 2008

    Posted 21 Jun 2010 Link to this post

    Kamen,
    Your code change recommendation fixed both problems.  Once I put the suggested code in, the sub menu background came right up.  Thanks for the help.

    Steve
  5. Reshmaa
    Reshmaa avatar
    4 posts
    Member since:
    Jun 2014

    Posted 17 Jun 2014 Link to this post

    Can anyone help me out for my issue....
    How can i show sub menu on mouse over when tab index is change in Radmenu?

    Thanks in Advance
    Regards
    Reshmaa Ramamurthy
  6. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 20 Jun 2014 Link to this post

    Hello Reshmaa,

    I would suggest reviewing the following demo.


    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017