Tab Alleman
Top achievements
Rank 1
Rank 1
Tab Alleman
asked on 08 Jun 2010, 09:26 PM
After much cat-herding, I have got my menu so that when you hover over a top-level item, the item changes colors and the sub-menu slides down.
I want to add a left- and right- border to the top-level item as well, but when I try, my left border is in the middle of my item. I guess some space to the left of my item is getting the background color changed? I can't figure out how to handle this. Here is the bit of the .css that changes the color:
I want to add a left- and right- border to the top-level item as well, but when I try, my left border is in the middle of my item. I guess some space to the left of my item is getting the background color changed? I can't figure out how to handle this. Here is the bit of the .css that changes the color:
| .RadMenu_ICR .rmLink:hover .rmText, |
| .RadMenu_ICR .rmExpanded |
| { |
| background-color: #d5ecf1 !important; |
| font: normal 12px/23px "Segoe UI", Arial, sans-serif; |
| color: #003366; |
| } |
to get borders, I am adding:
border-right:1px solid #336699;
border-left:1px solid #336699;
what else do I need to do?
4 Answers, 1 is accepted
0
Tab Alleman
Top achievements
Rank 1
Rank 1
answered on 09 Jun 2010, 03:15 PM
by playing with the visual style builder, I've found that I need to put the borders on .rmLink, and not .rmText.
However, when I changed that, now my root item only changes background color while I am hovering over it. When I move the pointer down to the submenu, it changes back to the non-hovered color. What element do I need to change to affect the root item of the submenu that I am hovering over?
However, when I changed that, now my root item only changes background color while I am hovering over it. When I move the pointer down to the submenu, it changes back to the non-hovered color. What element do I need to change to affect the root item of the submenu that I am hovering over?
0
Hello Tab,
You need to style the .rmExpanded class (it is added to the anchor tag when the item is expanded). You can also check the other basic RadMenu classes outlined in this documentation article.
Best wishes,
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.
You need to style the .rmExpanded class (it is added to the anchor tag when the item is expanded). You can also check the other basic RadMenu classes outlined in this documentation article.
Best wishes,
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
Tab Alleman
Top achievements
Rank 1
Rank 1
answered on 11 Jun 2010, 01:49 PM
Thanks for responding, Kamen, but as you see in the code block in my first post, I am including the rmExpanded class in my style block, but it is not working. Is my syntax incorrect?
0
Accepted
Hi Tab,
Well, you're explicitly setting the background-color property and most skins have background images applied there too, both on the anchor and on the rmText span. Try modifying your CSS rule like this:
.RadMenu_ICR .rmLink:hover .rmText,
.RadMenu_ICR .rmExpanded .rmText
{
background: #d5ecf1 !important;
font: normal 12px/23px "Segoe UI", Arial, sans-serif;
color: #003366;
}
Greetings,
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.
Well, you're explicitly setting the background-color property and most skins have background images applied there too, both on the anchor and on the rmText span. Try modifying your CSS rule like this:
.RadMenu_ICR .rmLink:hover .rmText,
.RadMenu_ICR .rmExpanded .rmText
{
background: #d5ecf1 !important;
font: normal 12px/23px "Segoe UI", Arial, sans-serif;
color: #003366;
}
Greetings,
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.