css borders

[Tab Alleman]

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:

.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?

 

[Tab Alleman]

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?

[Kamen Bundev]

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.

[Tab Alleman]

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?

[Kamen Bundev]

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.