This is a migrated thread and some comments may be shown as answers.

Submenus with RadMenu CSS

4 Answers 151 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 05 Jun 2010, 07:47 PM
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

4 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 10 Jun 2010, 09:25 AM
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.
0
Steven
Top achievements
Rank 1
answered on 21 Jun 2010, 07:32 PM
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
0
Reshmaa
Top achievements
Rank 1
answered on 18 Jun 2014, 04:46 AM
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
0
Boyan Dimitrov
Telerik team
answered on 20 Jun 2014, 03:34 PM
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.

 
Tags
Menu
Asked by
Steven
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Steven
Top achievements
Rank 1
Reshmaa
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or