Hi Kate,
The style I would like to have is this one,
As you can see, the root level and expanded child have a color gradient background from grey to white.
With the radMenu, I could not have one background for root and child. So, as you can see, we have a background for each. We can see a repetition of the gradient.
I have no image. My aspx is the following :
The CSS associate is :
.MainMenu
{
display
:
block
;
text-align
:
center
;
}
/* First line AllElements*/
.MainMenu .rmHorizontal .rmRootLink
{
background
: -moz-linear-gradient(
center
top
,
#E7E7E7
,
#FFFFFF
)
repeat
scroll
0
0
#F9F9F9
;
background
:
#F9F9F9
-webkit-gradient(linear,
0%
0%
,
0%
100%
, color-stop(
0%
,
#E7E7E7
), color-stop(
100%
,
white
));
background
:
#F9F9F9
-webkit-linear-gradient(
top
,
#E7E7E7
0%
,
white
100%
);
background
:
#F9F9F9
linear-gradient(
top
,
#E7E7E7
0%
,
white
100%
);
border-top
:
1px
solid
#CCCCCC
;
border-right
:
1px
solid
#CCCCCC
;
border-left
:
1px
solid
#CCCCCC
;
border-radius:
8px
8px
0
0
;
-webkit-border-radius:
8px
8px
0px
0px
;
line-height
:
23px
;
display
:
inline
;
width
:
200px
;
z-index
:
1
;
color
:
#666666
;
font-weight
:
bold
;
text-decoration
:
none
;
}
.RadMenu_Default .rmGroup
{
border-bottom
:
1px
solid
#CCCCCC
;
border-right
:
1px
solid
#CCCCCC
;
border-left
:
1px
solid
#CCCCCC
;
border-radius:
0
0
8px
8px
;
-webkit-border-radius:
0
0
8px
8px
;
}
.RadMenu_Default a.rmExpanded, .RadMenu_Default a.rmExpanded:hover
{
border-bottom
:
1px
solid
#CCCCCC
;
border-right
:
1px
solid
#CCCCCC
;
border-left
:
1px
solid
#CCCCCC
;
border-radius:
8px
8px
0
0
;
-webkit-border-radius:
8px
8px
0px
0px
;
}
.RadMenu_Default a.rmExpanded, .RadMenu_Default a.rmExpanded:hover,
.RadMenu_Default .rmGroup
{
background
: -moz-linear-gradient(
center
top
,
#E7E7E7
,
#FFFFFF
)
repeat
scroll
0
0
#F9F9F9
;
background
:
#F9F9F9
-webkit-gradient(linear,
0%
0%
,
0%
100%
, color-stop(
0%
,
#E7E7E7
), color-stop(
100%
,
white
));
background
:
#F9F9F9
-webkit-linear-gradient(
top
,
#E7E7E7
0%
,
white
100%
);
background
:
#F9F9F9
linear-gradient(
top
,
#E7E7E7
0%
,
white
100%
);
}
.MainMenu .rmRootGroup .rmItem a
{
text-align
:
center
!important
;
}
.MainMenu .rmHorizontal .rmItem .rmSlide .rmVertical .rmItem a
{
width
:
213px
;
color
:
#007F64
;
font-weight
:
normal
;
text-decoration
: none:
}
.MainMenu .rmHorizontal .rmFirst
{
margin-left
:
0
;
}
div.MainMenu
{
}
I hope you understand my problem better.
Julie