I have a RadMenu (with a custom skin - css code below) that has a root list with some of the root items having one level of child items. The issue that I have is that I have a border set to enclose the child items via a custom skin and it partially displays when you hover a root item that has no child items assigned to it (See attached images - NoChildItems.jpg and ChildItems.jpg). I changed the border color to red so that it would stand out during testing. Is there any way to rectify this or does the border have to be the same color as the root item background?
/* SVPD Menu / Simple> */
/* for root items */
div.RadMenu_SVPD ul.rmRootGroup
{
}
div.RadMenu_SVPD .rmLink
{
color
:
#ffffff
;
padding-left
:
15px
;
font-family
:
Arial
,
Helvetica
,
sans-serif
;
font-size
:
12px
;
font-weight
:
normal
;
text-decoration
:
none
;
height
:
20px
;
}
/* for hover, focused, expanded items */
div.RadMenu_SVPD .rmItem .rmLink:hover
{
color
:
#91c8ff
;
cursor
:
pointer
;
}
div.RadMenu_SVPD .rmItem .rmFocused,
div.RadMenu_SVPD .rmItem .rmSelected,
div.RadMenu_SVPD .rmItem .rmExpanded
{
}
/*for subitems */
div.RadMenu_SVPD .rmGroup
{
padding-top
:
4px
!important
;
border
:
1px
solid
#ff0000
;
background
:
#003c77
url
(
'Menu/rmVSprite.png'
)
repeat-y
;
}
div.RadMenu_SVPD .rmGroup .rmLink
{
color
:
#ffffff
;
padding-right
:
0px
!important
;
font-family
:
Arial
,
Helvetica
,
sans-serif
;
font-size
:
12px
;
font-weight
:
normal
;
text-decoration
:
none
;
float
:
left
;
}
div.RadMenu_SVPD .rmGroup .rmText
{
Padding-
left
:
10px
!important
;
}
/* for hover, focused, expanded items */
div.RadMenu_SVPD .rmGroup .rmItem .rmLink:hover
{
color
:
#91c8ff
;
cursor
:
pointer
;
}
div.RadMenu_SVPD .rmGroup .rmItem .rmFocused,
div.RadMenu_SVPD .rmGroup .rmItem .rmSelected,
div.RadMenu_SVPD .rmGroup .rmItem .rmExpanded
{
}