I'm able to create a menu that stretches 100% width, but the RadMenuItems are left aligned. I want the buttons to be center aligned (already figured out how to center align the text).
<telerik:RadMenu ID="RadMenu1" runat="server" ResolvedRenderMode="Classic"
EnableEmbeddedSkins="False" Skin="Green" width="100%" >
<Items>
<telerik:RadMenuItem runat="server" Text="Home">
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="Button1">
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="Button2">
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="Button3">
<Items>
<telerik:RadMenuItem runat="server" Text="Profile">
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="Password">
</telerik:RadMenuItem>
</Items>
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="Logout">
</telerik:RadMenuItem>
</Items>
</telerik:RadMenu>
Thanks!
<telerik:RadMenu ID="RadMenu1" runat="server" ResolvedRenderMode="Classic"
EnableEmbeddedSkins="False" Skin="Green" width="100%" >
<Items>
<telerik:RadMenuItem runat="server" Text="Home">
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="Button1">
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="Button2">
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="Button3">
<Items>
<telerik:RadMenuItem runat="server" Text="Profile">
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="Password">
</telerik:RadMenuItem>
</Items>
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="Logout">
</telerik:RadMenuItem>
</Items>
</telerik:RadMenu>
Thanks!
3 Answers, 1 is accepted
0
Hello,
Could you explain a little more detail exactly how you want to look your RadMenu control? After running the provided markup code the RadMenu looks as it is shown in the attached screenshot. You may draw something on the picture or explain a bit more.
Regards,
Boyan Dimitrov
Telerik
Could you explain a little more detail exactly how you want to look your RadMenu control? After running the provided markup code the RadMenu looks as it is shown in the attached screenshot. You may draw something on the picture or explain a bit more.
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.
0

Dennis
Top achievements
Rank 1
answered on 19 Jun 2014, 03:49 PM
Your screenshot is what I'm trying to do. I attached what I'm seeing in "getting_this.png" and what I want in "want_this.png".
I'm using the Silk theme and modified it to show green instead of blue. The css is below:
html .RadMenu_Green .rmDisabled .rmIcon, .RadMenu_Green .rmGroup .rmLink.rmDisabled .rmText:before, .RadMenu_Green .rmGroup .rmLink.rmDisabled:hover .rmText:before {
opacity: 0.4;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
/* IE 5-7 */
filter: alpha(opacity=40); }
html .RadMenu_Green {
color: #767676;
font: normal 13px/22px Arial, Helvetica, sans-serif;
line-height: 30px;
border:1px solid red;
}
html .RadMenu_Green .rmVertical.rmToggleHandles .rmRootLink .rmText {
padding-right: 35px; }
html .RadMenu_Green .rmLink {
color: #555555;
text-decoration: none; }
html .RadMenu_Green a.rmImageOnly .rmLeftImage {
margin: 7px 10px 8px 9px;
}
html .RadMenu_Green a.rmImageOnly:hover .rmLeftImage {
margin-bottom: 12px; }
html .RadMenu_Green .rmSeparator .rmText {
border-color: #e3e2e2 #fefefe #fefefe #e3e2e2; }
html .RadMenu_Green .rmHorizontal .rmSeparator {
margin: 0 0 -1px; }
html .RadMenu_Green .rmHorizontal .rmSeparator .rmText {
height: 38px;
margin: 0;
border-width: 0 1px; }
html .RadMenu_Green .rmHorizontal .rmVertical .rmSeparator {
height: auto; }
html .RadMenu_Green .rmHorizontal .rmVertical .rmSeparator .rmtext {
height: 0; }
html .RadMenu_Green .rmGroup.rmHorizontal .rmSeparator,
html .RadMenu_Green .rmScrollWrap .rmHorizontal .rmSeparator {
height: 30px; }
html .RadMenu_Green .rmGroup.rmVertical .rmSeparator .rmText,
html .RadMenu_Green .rmScrollWrap .rmVertical .rmSeparator .rmText {
margin: 1px 8px;
border-width: 1px 0; }
html .RadMenu_Green .rmIcon {
display: block; }
html .RadMenu_Green .rmToggle {
height: 26px; }
html .RadMenu_Green .rmRootLink .rmToggle {
height: 30px; }
html .RadMenu_Green .rmLeftArrow,
html .RadMenu_Green .rmRightArrow,
html .RadMenu_Green .rmTopArrow,
html .RadMenu_Green .rmBottomArrow {
border-color: #c9c9c9;
color: #767676;
background-color: #ebebeb;
border-width: 0;
border-style: solid;
background-image: url('Common/radActionsSprite.png'); }
html .RadMenu_Green .rmLeftArrow:hover,
html .RadMenu_Green .rmRightArrow:hover,
html .RadMenu_Green .rmTopArrow:hover,
html .RadMenu_Green .rmBottomArrow:hover {
border-color: #939393;
color: #444444;
background-color: #b4b4b4; }
html .RadMenu_Green .rmLeftArrow,
html .RadMenu_Green .rmRightArrow {
height: 38px; }
html .RadMenu_Green .rmLeftArrow {
border-right-width: 1px;
background-position: -20px -1106px; }
html .RadMenu_Green .rmLeftArrow:hover {
background-position: -70px -1106px; }
html .RadMenu_Green .rmRightArrow {
border-left-width: 1px;
background-position: -20px -1156px; }
html .RadMenu_Green .rmRightArrow:hover {
background-position: -70px -1156px; }
html .RadMenu_Green .rmTopArrow,
html .RadMenu_Green .rmBottomArrow {
background-image: url('Menu/rmArrows.png');
background-repeat: no-repeat; }
html .RadMenu_Green .rmTopArrow {
border-bottom-width: 1px;
background-position: center -20px; }
html .RadMenu_Green .rmTopArrow:hover {
background-position: center -220px; }
html .RadMenu_Green .rmBottomArrow {
border-top-width: 1px;
background-position: center -70px; }
html .RadMenu_Green .rmBottomArrow:hover {
background-position: center -270px; }
html .RadMenu_Green .rmTopFix,
html .RadMenu_Green .rmTopLeft,
html .RadMenu_Green .rmTopRight,
html .RadMenu_Green .rmBottomFix,
html .RadMenu_Green .rmBottomLeft,
html .RadMenu_Green .rmBottomRight {
display: none; }
.RadMenu_Green_Context.rmRoundedCorners ul.rmGroup {
padding: 0px; }
.RadMenu_Green_Context.RadMenu_Green .rmGroup {
border-top: 1px solid #ededed;
padding: 0; }
html .RadMenu_Green .rmRootGroup {
border-width: 1px;
border-style: solid;
border-color: #e3e2e2 #e3e2e2 #fff;
background: #d6d5d4 url('../Common/Gradients/radGradientHardLightV50.png') 0 0 repeat-x;
_background-image: none;
background-image: -webkit-linear-gradient(top, white 0%, #d6d5d4 100%);
background-image: -moz-linear-gradient(top, white 0%, #d6d5d4 100%);
background-image: -ms-linear-gradient(top, white 0%, #d6d5d4 100%);
background-image: -o-linear-gradient(top, white 0%, #d6d5d4 100%);
background-image: linear-gradient(top, white 0%, #d6d5d4 100%);
box-shadow: 0 2px 2px #e3e2e2; }
html .RadMenu_Green .rmRootGroup.rmVertical {
background: #f3f3f3;
border-bottom: 0; }
html .RadMenu_Green .rmTemplate {
padding: 4px 15px; }
html .RadMenu_Green .rmRootLink {
margin: 0;
padding: 4px 15px;
padding: 0;
line-height: 30px; }
html .RadMenu_Green .rmRootLink .rmText {
padding: 0;
padding: 4px 15px;
display: block;
width:100px;
text-align:center;
}
html .RadMenu_Green .rmRootLink .rmLeftImage {
margin: 10px -8px 0 5px; }
html .RadMenu_Green .rmRootLink:hover {
margin-top: -1px;
padding-top: 1px;
border-top: 4px solid #008000;
color: #008000;
background: #bdbdbd url('../Common/Gradients/radGradientHardLightV50.png') 0 0 repeat-x;
_background-image: none;
background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #bdbdbd 100%);
background-image: -moz-linear-gradient(top, #e5e5e5 0%, #bdbdbd 100%);
background-image: -ms-linear-gradient(top, #e5e5e5 0%, #bdbdbd 100%);
background-image: -o-linear-gradient(top, #e5e5e5 0%, #bdbdbd 100%);
background-image: linear-gradient(top, #e5e5e5 0%, #bdbdbd 100%); }
html .RadMenu_Green .rmRootLink:hover .rmText {
padding-top: 0; }
html .RadMenu_Green .rmRootLink:hover .rmLeftImage {
margin-top: 6px; }
html .RadMenu_Green .rmRootLink.rmFocused, html .RadMenu_Green .rmRootLink.rmSelected, html .RadMenu_Green .rmRootLink.rmExpanded {
margin-top: -1px;
padding-top: 1px;
border-top: 4px solid #008000;
color: #008000;
background-color: #ffffff;
background-image: -webkit-linear-gradient(top, #f0f0f0 0%, white 100%);
background-image: -moz-linear-gradient(top, #f0f0f0 0%, white 100%);
background-image: -ms-linear-gradient(top, #f0f0f0 0%, white 100%);
background-image: -o-linear-gradient(top, #f0f0f0 0%, white 100%);
background-image: linear-gradient(top, #f0f0f0 0%, white 100%); }
html .RadMenu_Green .rmRootLink.rmFocused .rmText, html .RadMenu_Green .rmRootLink.rmSelected .rmText, html .RadMenu_Green .rmRootLink.rmExpanded .rmText {
padding-top: 0; }
html .RadMenu_Green .rmRootLink.rmFocused .rmLeftImage, html .RadMenu_Green .rmRootLink.rmSelected .rmLeftImage, html .RadMenu_Green .rmRootLink.rmExpanded .rmLeftImage {
margin-top: 6px; }
html .RadMenu_Green .rmRootLink.rmDisabled {
border: 0;
color: #b1b1b1;
background: none;
box-shadow: none; }
html .RadMenu_Green .rmRootLink.rmDisabled .rmText {
padding-top: 4px; }
html .RadMenu_Green .rmVertical .rmRootLink {
margin: 0;
padding: 4px 15px;
padding: 0;
border: 0;
line-height: 22px; }
html .RadMenu_Green .rmVertical .rmRootLink .rmText {
padding: 4px 15px; }
html .RadMenu_Green .rmVertical .rmRootLink .rmLeftImage {
margin: 7px 5px 0; }
html .RadMenu_Green .rmVertical .rmRootLink:hover {
color: #ffffff;
background: #008000 url('../Common/Gradients/radGradientLightV50.png') 0 0 repeat-x;
_background-image: none;
background-image: -webkit-linear-gradient(top, #00a9c7 0%, #008000 100%);
background-image: -moz-linear-gradient(top, #00a9c7 0%, #008000 100%);
background-image: -ms-linear-gradient(top, #00a9c7 0%, #008000 100%);
background-image: -o-linear-gradient(top, #00a9c7 0%, #008000 100%);
background-image: linear-gradient(top, #00a9c7 0%, #008000 100%); }
html .RadMenu_Green .rmVertical .rmRootLink:hover .rmText.rmExpandRight:before {
background-position: -120px -1170px; }
html .RadMenu_Green .rmVertical .rmRootLink:hover .rmText.rmExpandLeft:before {
background-position: -120px -1120px; }
html .RadMenu_Green .rmVertical .rmRootLink.rmFocused {
color: #ffffff;
background: #008000 url('../Common/Gradients/radGradientLightV50.png') 0 0 repeat-x;
_background-image: none;
background-image: -webkit-linear-gradient(top, #00a9c7 0%, #008000 100%);
background-image: -moz-linear-gradient(top, #00a9c7 0%, #008000 100%);
background-image: -ms-linear-gradient(top, #00a9c7 0%, #008000 100%);
background-image: -o-linear-gradient(top, #00a9c7 0%, #008000 100%);
background-image: linear-gradient(top, #00a9c7 0%, #008000 100%); }
html .RadMenu_Green .rmVertical .rmRootLink.rmFocused .rmText.rmExpandRight:before {
background-position: -120px -1170px; }
html .RadMenu_Green .rmVertical .rmRootLink.rmFocused .rmText.rmExpandLeft:before {
background-position: -120px -1120px; }
html .RadMenu_Green .rmVertical .rmRootLink.rmDisabled {
border: 0;
color: #b1b1b1;
background: none;
box-shadow: none; }
html .RadMenu_Green .rmVertical .rmRootLink.rmDisabled .rmText {
padding: 4px 15px; }
html .RadMenu_Green .rmToggle {
margin: 0; }
html .RadMenu_Green .rmGroup .rmLeftImage {
margin: 7px 0 0 6px; }
.RadMenu_Green .rmGroup,
.RadMenu_Green .rmPopup {
padding: 1px;
background: #ffffff;
box-shadow: 0 3px 3px rgba(122, 122, 122, 0.7);
border: 0; }
@media \0screen\,screen\9 {
.RadMenu_Green .rmRoundedCorners .rmItem ul.rmGroup,
.RadMenu_Green .rmRoundedCorners .rmSlide .rmScrollWrap,
.RadMenu_Green .rmRoundedCorners .rmContentTemplate {
border: 1px solid #dddddd; } }
.RadMenu_Green .rmRoundedCorners ul.rmGroup {
margin-top: 0; }
.RadMenu_Green .rmRoundedCorners .rmItem .rmGroup,
.RadMenu_Green .rmRoundedCorners .rmScrollWrapContainer {
padding: 0px; }
.RadMenu_Green .rmScrollWrapContainer .rmGroup {
box-shadow: none; }
.RadMenu_Green .rmScrollWrapContainer {
background: #fff;
box-shadow: 0 3px 3px rgba(122, 122, 122, 0.7); }
.RadMenu_Green .rmGroup .rmItem {
*line-height: 30px; }
.RadMenu_Green .rmGroup .rmLink {
color: #767676; }
.RadMenu_Green .rmGroup .rmLink .rmText {
position: relative; }
.RadMenu_Green .rmGroup .rmLink .rmText:before {
content: "";
margin-top: -8px;
width: 16px;
height: 16px;
background-image: url('Common/radActionsSprite.png');
background-repeat: no-repeat;
display: none;
position: absolute;
top: 50%; }
.RadMenu_Green .rmGroup .rmLink .rmExpandTop,
.RadMenu_Green .rmGroup .rmLink .rmExpandDown,
.RadMenu_Green .rmGroup .rmLink .rmExpandRight,
.RadMenu_Green .rmGroup .rmLink .rmExpandLeft {
*background-image: url('Menu/rmArrows.png');
background-repeat: no-repeat; }
.RadMenu_Green .rmGroup .rmLink .rmExpandTop {
background-position: right -10px; }
.RadMenu_Green .rmGroup .rmLink .rmExpandDown {
background-position: right -60px; }
.RadMenu_Green .rmGroup .rmLink .rmExpandLeft {
background-position: right -110px; }
.RadMenu_Green .rmGroup .rmLink .rmExpandRight {
background-position: right -160px; }
.RadMenu_Green .rmGroup .rmLink:hover .rmExpandTop, .RadMenu_Green .rmGroup .rmLink.rmFocused .rmExpandTop, .RadMenu_Green .rmGroup .rmLink.rmSelected .rmExpandTop, .RadMenu_Green .rmGroup .rmLink.rmExpanded .rmExpandTop {
background-position: right -410px; }
.RadMenu_Green .rmGroup .rmLink:hover .rmExpandDown, .RadMenu_Green .rmGroup .rmLink.rmFocused .rmExpandDown, .RadMenu_Green .rmGroup .rmLink.rmSelected .rmExpandDown, .RadMenu_Green .rmGroup .rmLink.rmExpanded .rmExpandDown {
background-position: right -460px; }
.RadMenu_Green .rmGroup .rmLink:hover .rmExpandLeft, .RadMenu_Green .rmGroup .rmLink.rmFocused .rmExpandLeft, .RadMenu_Green .rmGroup .rmLink.rmSelected .rmExpandLeft, .RadMenu_Green .rmGroup .rmLink.rmExpanded .rmExpandLeft {
background-position: right -510px; }
.RadMenu_Green .rmGroup .rmLink:hover .rmExpandRight, .RadMenu_Green .rmGroup .rmLink.rmFocused .rmExpandRight, .RadMenu_Green .rmGroup .rmLink.rmSelected .rmExpandRight, .RadMenu_Green .rmGroup .rmLink.rmExpanded .rmExpandRight {
background-position: right -560px; }
.RadMenu_Green .rmGroup .rmLink.rmDisabled .rmExpandTop {
background-position: right -10px; }
.RadMenu_Green .rmGroup .rmLink.rmDisabled .rmExpandDown {
background-position: right -60px; }
.RadMenu_Green .rmGroup .rmLink.rmDisabled .rmExpandLeft {
background-position: right -110px; }
.RadMenu_Green .rmGroup .rmLink.rmDisabled .rmExpandRight {
background-position: right -160px; }
.RadMenu_Green .rmGroup .rmLink .rmExpandTop:before,
.RadMenu_Green .rmGroup .rmLink .rmExpandDown:before,
.RadMenu_Green .rmGroup .rmLink .rmExpandRight:before,
.RadMenu_Green .rmGroup .rmLink .rmExpandLeft:before {
display: block;
right: 6px; }
.RadMenu_Green .rmGroup .rmLink .rmExpandTop:before {
background-position: -17px -1017px; }
.RadMenu_Green .rmGroup .rmLink .rmExpandDown:before {
background-position: -17px -1067px; }
.RadMenu_Green .rmGroup .rmLink .rmExpandRight:before {
background-position: -17px -1167px; }
.RadMenu_Green .rmGroup .rmLink .rmExpandLeft:before {
background-position: -17px -1117px; }
.RadMenu_Green .rmGroup .rmLink.rmExpanded, .RadMenu_Green .rmGroup .rmLink:hover, .RadMenu_Green .rmGroup .rmLink.rmFocused, .RadMenu_Green .rmGroup .rmLink.rmSelected {
color: #ffffff;
background: #008000 url('../Common/Gradients/radGradientLightV50.png') 0 0 repeat-x;
_background-image: none;
background-image: -webkit-linear-gradient(top, #00cb00 0%, #008000 100%);
background-image: -moz-linear-gradient(top, #00cb00 0%, #008000 100%);
background-image: -ms-linear-gradient(top, #00cb00 0%, #008000 100%);
background-image: -o-linear-gradient(top, #00cb00 0%, #008000 100%);
background-image: linear-gradient(top, #00cb00 0%, #008000 100%); }
.RadMenu_Green .rmGroup .rmLink.rmExpanded .rmExpandTop:before, .RadMenu_Green .rmGroup .rmLink:hover .rmExpandTop:before, .RadMenu_Green .rmGroup .rmLink.rmFocused .rmExpandTop:before, .RadMenu_Green .rmGroup .rmLink.rmSelected .rmExpandTop:before {
background-position: -117px -1017px; }
.RadMenu_Green .rmGroup .rmLink.rmExpanded .rmExpandDown:before, .RadMenu_Green .rmGroup .rmLink:hover .rmExpandDown:before, .RadMenu_Green .rmGroup .rmLink.rmFocused .rmExpandDown:before, .RadMenu_Green .rmGroup .rmLink.rmSelected .rmExpandDown:before {
background-position: -117px -1067px; }
.RadMenu_Green .rmGroup .rmLink.rmExpanded .rmExpandRight:before, .RadMenu_Green .rmGroup .rmLink:hover .rmExpandRight:before, .RadMenu_Green .rmGroup .rmLink.rmFocused .rmExpandRight:before, .RadMenu_Green .rmGroup .rmLink.rmSelected .rmExpandRight:before {
background-position: -117px -1167px; }
.RadMenu_Green .rmGroup .rmLink.rmExpanded .rmExpandLeft:before, .RadMenu_Green .rmGroup .rmLink:hover .rmExpandLeft:before, .RadMenu_Green .rmGroup .rmLink.rmFocused .rmExpandLeft:before, .RadMenu_Green .rmGroup .rmLink.rmSelected .rmExpandLeft:before {
background-position: -117px -1117px; }
.RadMenu_Green .rmGroup .rmLink.rmDisabled, .RadMenu_Green .rmGroup .rmLink.rmDisabled:hover {
color: #d7d7d7;
background-image: none !important;
background: none; }
.RadMenu_Green .rmGroup .rmLink.rmDisabled .rmExpandTop:before, .RadMenu_Green .rmGroup .rmLink.rmDisabled:hover .rmExpandTop:before {
background-position: -17px -1017px; }
.RadMenu_Green .rmGroup .rmLink.rmDisabled .rmExpandDown:before, .RadMenu_Green .rmGroup .rmLink.rmDisabled:hover .rmExpandDown:before {
background-position: -17px -1067px; }
.RadMenu_Green .rmGroup .rmLink.rmDisabled .rmExpandRight:before, .RadMenu_Green .rmGroup .rmLink.rmDisabled:hover .rmExpandRight:before {
background-position: -17px -1167px; }
.RadMenu_Green .rmGroup .rmLink.rmDisabled .rmExpandLeft:before, .RadMenu_Green .rmGroup .rmLink.rmDisabled:hover .rmExpandLeft:before {
background-position: -17px -1117px; }
.RadMenu_Green .rmSlide .rmHorizontal .rmItem {
margin-bottom: 0; }
.RadMenu_Green .rmVertical .rmGroup,
.RadMenu_Green .rmSlide .rmGroup .rmGroup,
.RadMenu_Green .rmVertical .rmScrollWrapContainer {
border-top: 1px solid #ededed; }
.RadMenu_Green .rmVertical .rmScrollWrapContainer .rmVertical {
border: 0; }
.RadMenu_Green .rmMultiColumn {
background: #ffffff;
box-shadow: 0 3px 3px rgba(122, 122, 122, 0.7); }
.RadMenu_Green .rmMultiColumn .rmGroup {
box-shadow: none; }
.RadMenu_Green .rmGroup .rmLeftArrow,
.RadMenu_Green .rmGroup .rmRightArrow {
height: 34px; }
.RadMenu_Green .rmGroup .rmLeftArrow {
background-position: -20px -1107px; }
.RadMenu_Green .rmGroup .rmLeftArrow:hover {
background-position: -70px -1107px; }
.RadMenu_Green .rmGroup .rmRightArrow {
background-position: -20px -1157px; }
.RadMenu_Green .rmGroup .rmRightArrow:hover {
background-position: -70px -1157px; }
.RadMenu_Green .rmHorizontal .rmRootLink .rmToggle {
margin-top: 4px;
margin-bottom: 4px;
height: 30px; }
.RadMenu_Green .rmHorizontal .rmRootLink:hover .rmToggle,
.RadMenu_Green .rmHorizontal .rmRootLink.rmFocused .rmToggle,
.RadMenu_Green .rmHorizontal .rmRootLink.rmSelected .rmToggle,
.RadMenu_Green .rmHorizontal .rmRootLink.rmExpanded .rmToggle {
margin-top: 0; }
.RadMenu_Green .rmRootLink .rmIcon {
background-image: url('Menu/rmArrows.png'); }
.RadMenu_Green .rmHorizontal .rmRootLink .rmIcon {
background-position: 50% -67px; }
@media screen\9 {
.RadMenu_Green .rmHorizontal .rmRootLink .rmIcon {
background-position: -2px -67px; } }
.RadMenu_Green .rmVertical .rmRootLink .rmIcon {
background-position: 50% -167px; }
@media screen\9 {
.RadMenu_Green .rmVertical .rmRootLink .rmIcon {
background-position: -2px -167px; } }
.RadMenu_Green .rmVertical .rmRootLink:hover .rmIcon, .RadMenu_Green .rmVertical .rmRootLink.rmFocused .rmIcon {
background-position: 50% -567px; }
@media screen\9 {
.RadMenu_Green .rmVertical .rmRootLink:hover .rmIcon, .RadMenu_Green .rmVertical .rmRootLink.rmFocused .rmIcon {
background-position: -2px -567px; } }
.RadMenu_Green .rmVertical .rmRootLink.rmDisabled .rmIcon {
background-position: 50% -167px; }
@media screen\9 {
.RadMenu_Green .rmVertical .rmRootLink.rmDisabled .rmIcon {
background-position: -2px -167px; } }
.RadMenu_Green .rmRootGroup .rmHorizontal .rmText {
line-height: 34px; }
html .RadMenu_Green_rtl .rmVertical.rmToggleHandles .rmRootLink .rmText {
padding-right: 15px;
padding-left: 35px; }
html .RadMenu_Green_rtl .rmHorizontal .rmRootLink .rmLeftImage {
margin-left: -8px;
margin-right: 5px; }
@media screen\9 {
html .RadMenu_Green_rtl .rmVertical .rmRootLink .rmLeftImage {
margin-left: -5px; } }
html .RadMenu_Green_rtl .rmVertical .rmRootLink .rmIcon {
background-position: 50% -117px; }
@media screen\9 {
html .RadMenu_Green_rtl .rmVertical .rmRootLink .rmIcon {
background-position: -2px -117px; } }
html .RadMenu_Green_rtl .rmVertical .rmRootLink:hover .rmIcon, html .RadMenu_Green_rtl .rmVertical .rmRootLink.rmFocused .rmIcon {
background-position: 50% -517px; }
@media screen\9 {
html .RadMenu_Green_rtl .rmVertical .rmRootLink:hover .rmIcon, html .RadMenu_Green_rtl .rmVertical .rmRootLink.rmFocused .rmIcon {
background-position: -2px -517px; } }
html .RadMenu_Green_rtl .rmRootGroup .rmSeparator .rmText {
border-color: #fefefe #e3e2e2 #e3e2e2 #fefefe; }
html .RadMenu_Green_rtl .rmRootGroup .rmLast {
border-left: 0; }
html .RadMenu_Green_rtl .rmGroup .rmLink .rmExpandTop {
background-position: left -8px; }
html .RadMenu_Green_rtl .rmGroup .rmLink .rmExpandDown {
background-position: left -58px; }
html .RadMenu_Green_rtl .rmGroup .rmLink .rmExpandLeft {
background-position: left -108px; }
html .RadMenu_Green_rtl .rmGroup .rmLink .rmExpandRight {
background-position: left -158px; }
html .RadMenu_Green_rtl .rmGroup .rmLink:hover .rmExpandTop, html .RadMenu_Green_rtl .rmGroup .rmLink.rmFocused .rmExpandTop, html .RadMenu_Green_rtl .rmGroup .rmLink.rmSelected .rmExpandTop, html .RadMenu_Green_rtl .rmGroup .rmLink.rmExpanded .rmExpandTop {
background-position: left -408px; }
html .RadMenu_Green_rtl .rmGroup .rmLink:hover .rmExpandDown, html .RadMenu_Green_rtl .rmGroup .rmLink.rmFocused .rmExpandDown, html .RadMenu_Green_rtl .rmGroup .rmLink.rmSelected .rmExpandDown, html .RadMenu_Green_rtl .rmGroup .rmLink.rmExpanded .rmExpandDown {
background-position: left -458px; }
html .RadMenu_Green_rtl .rmGroup .rmLink:hover .rmExpandLeft, html .RadMenu_Green_rtl .rmGroup .rmLink.rmFocused .rmExpandLeft, html .RadMenu_Green_rtl .rmGroup .rmLink.rmSelected .rmExpandLeft, html .RadMenu_Green_rtl .rmGroup .rmLink.rmExpanded .rmExpandLeft {
background-position: left -508px; }
html .RadMenu_Green_rtl .rmGroup .rmLink:hover .rmExpandRight, html .RadMenu_Green_rtl .rmGroup .rmLink.rmFocused .rmExpandRight, html .RadMenu_Green_rtl .rmGroup .rmLink.rmSelected .rmExpandRight, html .RadMenu_Green_rtl .rmGroup .rmLink.rmExpanded .rmExpandRight {
background-position: left -558px; }
html .RadMenu_Green_rtl .rmGroup .rmLink .rmExpandTop:before,
html .RadMenu_Green_rtl .rmGroup .rmLink .rmExpandDown:before,
html .RadMenu_Green_rtl .rmGroup .rmLink .rmExpandRight:before,
html .RadMenu_Green_rtl .rmGroup .rmLink .rmExpandLeft:before {
right: auto;
left: 5px; }
html .RadMenu_Green_rtl .rmGroup .rmLeftImage {
margin: 7px 6px 0px 0px; }
html .RadMenu_Green_rtl .rmRoundedCorners .rmSlide,
html .RadMenu_Green_rtl .rmShadows .rmSlide,
html .RadMenu_Green_rtl div.rmRoundedCorners,
html .RadMenu_Green_rtl div.rmShadows {
padding: 0; }
html div.RadMenu_Green .rmRootGroup {
text-align: center;
line-height: 30px;
}
html .RadMenu_Green .rmItem {
float: none;
display: inline-block;
}
I'm using the Silk theme and modified it to show green instead of blue. The css is below:
html .RadMenu_Green .rmDisabled .rmIcon, .RadMenu_Green .rmGroup .rmLink.rmDisabled .rmText:before, .RadMenu_Green .rmGroup .rmLink.rmDisabled:hover .rmText:before {
opacity: 0.4;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
/* IE 5-7 */
filter: alpha(opacity=40); }
html .RadMenu_Green {
color: #767676;
font: normal 13px/22px Arial, Helvetica, sans-serif;
line-height: 30px;
border:1px solid red;
}
html .RadMenu_Green .rmVertical.rmToggleHandles .rmRootLink .rmText {
padding-right: 35px; }
html .RadMenu_Green .rmLink {
color: #555555;
text-decoration: none; }
html .RadMenu_Green a.rmImageOnly .rmLeftImage {
margin: 7px 10px 8px 9px;
}
html .RadMenu_Green a.rmImageOnly:hover .rmLeftImage {
margin-bottom: 12px; }
html .RadMenu_Green .rmSeparator .rmText {
border-color: #e3e2e2 #fefefe #fefefe #e3e2e2; }
html .RadMenu_Green .rmHorizontal .rmSeparator {
margin: 0 0 -1px; }
html .RadMenu_Green .rmHorizontal .rmSeparator .rmText {
height: 38px;
margin: 0;
border-width: 0 1px; }
html .RadMenu_Green .rmHorizontal .rmVertical .rmSeparator {
height: auto; }
html .RadMenu_Green .rmHorizontal .rmVertical .rmSeparator .rmtext {
height: 0; }
html .RadMenu_Green .rmGroup.rmHorizontal .rmSeparator,
html .RadMenu_Green .rmScrollWrap .rmHorizontal .rmSeparator {
height: 30px; }
html .RadMenu_Green .rmGroup.rmVertical .rmSeparator .rmText,
html .RadMenu_Green .rmScrollWrap .rmVertical .rmSeparator .rmText {
margin: 1px 8px;
border-width: 1px 0; }
html .RadMenu_Green .rmIcon {
display: block; }
html .RadMenu_Green .rmToggle {
height: 26px; }
html .RadMenu_Green .rmRootLink .rmToggle {
height: 30px; }
html .RadMenu_Green .rmLeftArrow,
html .RadMenu_Green .rmRightArrow,
html .RadMenu_Green .rmTopArrow,
html .RadMenu_Green .rmBottomArrow {
border-color: #c9c9c9;
color: #767676;
background-color: #ebebeb;
border-width: 0;
border-style: solid;
background-image: url('Common/radActionsSprite.png'); }
html .RadMenu_Green .rmLeftArrow:hover,
html .RadMenu_Green .rmRightArrow:hover,
html .RadMenu_Green .rmTopArrow:hover,
html .RadMenu_Green .rmBottomArrow:hover {
border-color: #939393;
color: #444444;
background-color: #b4b4b4; }
html .RadMenu_Green .rmLeftArrow,
html .RadMenu_Green .rmRightArrow {
height: 38px; }
html .RadMenu_Green .rmLeftArrow {
border-right-width: 1px;
background-position: -20px -1106px; }
html .RadMenu_Green .rmLeftArrow:hover {
background-position: -70px -1106px; }
html .RadMenu_Green .rmRightArrow {
border-left-width: 1px;
background-position: -20px -1156px; }
html .RadMenu_Green .rmRightArrow:hover {
background-position: -70px -1156px; }
html .RadMenu_Green .rmTopArrow,
html .RadMenu_Green .rmBottomArrow {
background-image: url('Menu/rmArrows.png');
background-repeat: no-repeat; }
html .RadMenu_Green .rmTopArrow {
border-bottom-width: 1px;
background-position: center -20px; }
html .RadMenu_Green .rmTopArrow:hover {
background-position: center -220px; }
html .RadMenu_Green .rmBottomArrow {
border-top-width: 1px;
background-position: center -70px; }
html .RadMenu_Green .rmBottomArrow:hover {
background-position: center -270px; }
html .RadMenu_Green .rmTopFix,
html .RadMenu_Green .rmTopLeft,
html .RadMenu_Green .rmTopRight,
html .RadMenu_Green .rmBottomFix,
html .RadMenu_Green .rmBottomLeft,
html .RadMenu_Green .rmBottomRight {
display: none; }
.RadMenu_Green_Context.rmRoundedCorners ul.rmGroup {
padding: 0px; }
.RadMenu_Green_Context.RadMenu_Green .rmGroup {
border-top: 1px solid #ededed;
padding: 0; }
html .RadMenu_Green .rmRootGroup {
border-width: 1px;
border-style: solid;
border-color: #e3e2e2 #e3e2e2 #fff;
background: #d6d5d4 url('../Common/Gradients/radGradientHardLightV50.png') 0 0 repeat-x;
_background-image: none;
background-image: -webkit-linear-gradient(top, white 0%, #d6d5d4 100%);
background-image: -moz-linear-gradient(top, white 0%, #d6d5d4 100%);
background-image: -ms-linear-gradient(top, white 0%, #d6d5d4 100%);
background-image: -o-linear-gradient(top, white 0%, #d6d5d4 100%);
background-image: linear-gradient(top, white 0%, #d6d5d4 100%);
box-shadow: 0 2px 2px #e3e2e2; }
html .RadMenu_Green .rmRootGroup.rmVertical {
background: #f3f3f3;
border-bottom: 0; }
html .RadMenu_Green .rmTemplate {
padding: 4px 15px; }
html .RadMenu_Green .rmRootLink {
margin: 0;
padding: 4px 15px;
padding: 0;
line-height: 30px; }
html .RadMenu_Green .rmRootLink .rmText {
padding: 0;
padding: 4px 15px;
display: block;
width:100px;
text-align:center;
}
html .RadMenu_Green .rmRootLink .rmLeftImage {
margin: 10px -8px 0 5px; }
html .RadMenu_Green .rmRootLink:hover {
margin-top: -1px;
padding-top: 1px;
border-top: 4px solid #008000;
color: #008000;
background: #bdbdbd url('../Common/Gradients/radGradientHardLightV50.png') 0 0 repeat-x;
_background-image: none;
background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #bdbdbd 100%);
background-image: -moz-linear-gradient(top, #e5e5e5 0%, #bdbdbd 100%);
background-image: -ms-linear-gradient(top, #e5e5e5 0%, #bdbdbd 100%);
background-image: -o-linear-gradient(top, #e5e5e5 0%, #bdbdbd 100%);
background-image: linear-gradient(top, #e5e5e5 0%, #bdbdbd 100%); }
html .RadMenu_Green .rmRootLink:hover .rmText {
padding-top: 0; }
html .RadMenu_Green .rmRootLink:hover .rmLeftImage {
margin-top: 6px; }
html .RadMenu_Green .rmRootLink.rmFocused, html .RadMenu_Green .rmRootLink.rmSelected, html .RadMenu_Green .rmRootLink.rmExpanded {
margin-top: -1px;
padding-top: 1px;
border-top: 4px solid #008000;
color: #008000;
background-color: #ffffff;
background-image: -webkit-linear-gradient(top, #f0f0f0 0%, white 100%);
background-image: -moz-linear-gradient(top, #f0f0f0 0%, white 100%);
background-image: -ms-linear-gradient(top, #f0f0f0 0%, white 100%);
background-image: -o-linear-gradient(top, #f0f0f0 0%, white 100%);
background-image: linear-gradient(top, #f0f0f0 0%, white 100%); }
html .RadMenu_Green .rmRootLink.rmFocused .rmText, html .RadMenu_Green .rmRootLink.rmSelected .rmText, html .RadMenu_Green .rmRootLink.rmExpanded .rmText {
padding-top: 0; }
html .RadMenu_Green .rmRootLink.rmFocused .rmLeftImage, html .RadMenu_Green .rmRootLink.rmSelected .rmLeftImage, html .RadMenu_Green .rmRootLink.rmExpanded .rmLeftImage {
margin-top: 6px; }
html .RadMenu_Green .rmRootLink.rmDisabled {
border: 0;
color: #b1b1b1;
background: none;
box-shadow: none; }
html .RadMenu_Green .rmRootLink.rmDisabled .rmText {
padding-top: 4px; }
html .RadMenu_Green .rmVertical .rmRootLink {
margin: 0;
padding: 4px 15px;
padding: 0;
border: 0;
line-height: 22px; }
html .RadMenu_Green .rmVertical .rmRootLink .rmText {
padding: 4px 15px; }
html .RadMenu_Green .rmVertical .rmRootLink .rmLeftImage {
margin: 7px 5px 0; }
html .RadMenu_Green .rmVertical .rmRootLink:hover {
color: #ffffff;
background: #008000 url('../Common/Gradients/radGradientLightV50.png') 0 0 repeat-x;
_background-image: none;
background-image: -webkit-linear-gradient(top, #00a9c7 0%, #008000 100%);
background-image: -moz-linear-gradient(top, #00a9c7 0%, #008000 100%);
background-image: -ms-linear-gradient(top, #00a9c7 0%, #008000 100%);
background-image: -o-linear-gradient(top, #00a9c7 0%, #008000 100%);
background-image: linear-gradient(top, #00a9c7 0%, #008000 100%); }
html .RadMenu_Green .rmVertical .rmRootLink:hover .rmText.rmExpandRight:before {
background-position: -120px -1170px; }
html .RadMenu_Green .rmVertical .rmRootLink:hover .rmText.rmExpandLeft:before {
background-position: -120px -1120px; }
html .RadMenu_Green .rmVertical .rmRootLink.rmFocused {
color: #ffffff;
background: #008000 url('../Common/Gradients/radGradientLightV50.png') 0 0 repeat-x;
_background-image: none;
background-image: -webkit-linear-gradient(top, #00a9c7 0%, #008000 100%);
background-image: -moz-linear-gradient(top, #00a9c7 0%, #008000 100%);
background-image: -ms-linear-gradient(top, #00a9c7 0%, #008000 100%);
background-image: -o-linear-gradient(top, #00a9c7 0%, #008000 100%);
background-image: linear-gradient(top, #00a9c7 0%, #008000 100%); }
html .RadMenu_Green .rmVertical .rmRootLink.rmFocused .rmText.rmExpandRight:before {
background-position: -120px -1170px; }
html .RadMenu_Green .rmVertical .rmRootLink.rmFocused .rmText.rmExpandLeft:before {
background-position: -120px -1120px; }
html .RadMenu_Green .rmVertical .rmRootLink.rmDisabled {
border: 0;
color: #b1b1b1;
background: none;
box-shadow: none; }
html .RadMenu_Green .rmVertical .rmRootLink.rmDisabled .rmText {
padding: 4px 15px; }
html .RadMenu_Green .rmToggle {
margin: 0; }
html .RadMenu_Green .rmGroup .rmLeftImage {
margin: 7px 0 0 6px; }
.RadMenu_Green .rmGroup,
.RadMenu_Green .rmPopup {
padding: 1px;
background: #ffffff;
box-shadow: 0 3px 3px rgba(122, 122, 122, 0.7);
border: 0; }
@media \0screen\,screen\9 {
.RadMenu_Green .rmRoundedCorners .rmItem ul.rmGroup,
.RadMenu_Green .rmRoundedCorners .rmSlide .rmScrollWrap,
.RadMenu_Green .rmRoundedCorners .rmContentTemplate {
border: 1px solid #dddddd; } }
.RadMenu_Green .rmRoundedCorners ul.rmGroup {
margin-top: 0; }
.RadMenu_Green .rmRoundedCorners .rmItem .rmGroup,
.RadMenu_Green .rmRoundedCorners .rmScrollWrapContainer {
padding: 0px; }
.RadMenu_Green .rmScrollWrapContainer .rmGroup {
box-shadow: none; }
.RadMenu_Green .rmScrollWrapContainer {
background: #fff;
box-shadow: 0 3px 3px rgba(122, 122, 122, 0.7); }
.RadMenu_Green .rmGroup .rmItem {
*line-height: 30px; }
.RadMenu_Green .rmGroup .rmLink {
color: #767676; }
.RadMenu_Green .rmGroup .rmLink .rmText {
position: relative; }
.RadMenu_Green .rmGroup .rmLink .rmText:before {
content: "";
margin-top: -8px;
width: 16px;
height: 16px;
background-image: url('Common/radActionsSprite.png');
background-repeat: no-repeat;
display: none;
position: absolute;
top: 50%; }
.RadMenu_Green .rmGroup .rmLink .rmExpandTop,
.RadMenu_Green .rmGroup .rmLink .rmExpandDown,
.RadMenu_Green .rmGroup .rmLink .rmExpandRight,
.RadMenu_Green .rmGroup .rmLink .rmExpandLeft {
*background-image: url('Menu/rmArrows.png');
background-repeat: no-repeat; }
.RadMenu_Green .rmGroup .rmLink .rmExpandTop {
background-position: right -10px; }
.RadMenu_Green .rmGroup .rmLink .rmExpandDown {
background-position: right -60px; }
.RadMenu_Green .rmGroup .rmLink .rmExpandLeft {
background-position: right -110px; }
.RadMenu_Green .rmGroup .rmLink .rmExpandRight {
background-position: right -160px; }
.RadMenu_Green .rmGroup .rmLink:hover .rmExpandTop, .RadMenu_Green .rmGroup .rmLink.rmFocused .rmExpandTop, .RadMenu_Green .rmGroup .rmLink.rmSelected .rmExpandTop, .RadMenu_Green .rmGroup .rmLink.rmExpanded .rmExpandTop {
background-position: right -410px; }
.RadMenu_Green .rmGroup .rmLink:hover .rmExpandDown, .RadMenu_Green .rmGroup .rmLink.rmFocused .rmExpandDown, .RadMenu_Green .rmGroup .rmLink.rmSelected .rmExpandDown, .RadMenu_Green .rmGroup .rmLink.rmExpanded .rmExpandDown {
background-position: right -460px; }
.RadMenu_Green .rmGroup .rmLink:hover .rmExpandLeft, .RadMenu_Green .rmGroup .rmLink.rmFocused .rmExpandLeft, .RadMenu_Green .rmGroup .rmLink.rmSelected .rmExpandLeft, .RadMenu_Green .rmGroup .rmLink.rmExpanded .rmExpandLeft {
background-position: right -510px; }
.RadMenu_Green .rmGroup .rmLink:hover .rmExpandRight, .RadMenu_Green .rmGroup .rmLink.rmFocused .rmExpandRight, .RadMenu_Green .rmGroup .rmLink.rmSelected .rmExpandRight, .RadMenu_Green .rmGroup .rmLink.rmExpanded .rmExpandRight {
background-position: right -560px; }
.RadMenu_Green .rmGroup .rmLink.rmDisabled .rmExpandTop {
background-position: right -10px; }
.RadMenu_Green .rmGroup .rmLink.rmDisabled .rmExpandDown {
background-position: right -60px; }
.RadMenu_Green .rmGroup .rmLink.rmDisabled .rmExpandLeft {
background-position: right -110px; }
.RadMenu_Green .rmGroup .rmLink.rmDisabled .rmExpandRight {
background-position: right -160px; }
.RadMenu_Green .rmGroup .rmLink .rmExpandTop:before,
.RadMenu_Green .rmGroup .rmLink .rmExpandDown:before,
.RadMenu_Green .rmGroup .rmLink .rmExpandRight:before,
.RadMenu_Green .rmGroup .rmLink .rmExpandLeft:before {
display: block;
right: 6px; }
.RadMenu_Green .rmGroup .rmLink .rmExpandTop:before {
background-position: -17px -1017px; }
.RadMenu_Green .rmGroup .rmLink .rmExpandDown:before {
background-position: -17px -1067px; }
.RadMenu_Green .rmGroup .rmLink .rmExpandRight:before {
background-position: -17px -1167px; }
.RadMenu_Green .rmGroup .rmLink .rmExpandLeft:before {
background-position: -17px -1117px; }
.RadMenu_Green .rmGroup .rmLink.rmExpanded, .RadMenu_Green .rmGroup .rmLink:hover, .RadMenu_Green .rmGroup .rmLink.rmFocused, .RadMenu_Green .rmGroup .rmLink.rmSelected {
color: #ffffff;
background: #008000 url('../Common/Gradients/radGradientLightV50.png') 0 0 repeat-x;
_background-image: none;
background-image: -webkit-linear-gradient(top, #00cb00 0%, #008000 100%);
background-image: -moz-linear-gradient(top, #00cb00 0%, #008000 100%);
background-image: -ms-linear-gradient(top, #00cb00 0%, #008000 100%);
background-image: -o-linear-gradient(top, #00cb00 0%, #008000 100%);
background-image: linear-gradient(top, #00cb00 0%, #008000 100%); }
.RadMenu_Green .rmGroup .rmLink.rmExpanded .rmExpandTop:before, .RadMenu_Green .rmGroup .rmLink:hover .rmExpandTop:before, .RadMenu_Green .rmGroup .rmLink.rmFocused .rmExpandTop:before, .RadMenu_Green .rmGroup .rmLink.rmSelected .rmExpandTop:before {
background-position: -117px -1017px; }
.RadMenu_Green .rmGroup .rmLink.rmExpanded .rmExpandDown:before, .RadMenu_Green .rmGroup .rmLink:hover .rmExpandDown:before, .RadMenu_Green .rmGroup .rmLink.rmFocused .rmExpandDown:before, .RadMenu_Green .rmGroup .rmLink.rmSelected .rmExpandDown:before {
background-position: -117px -1067px; }
.RadMenu_Green .rmGroup .rmLink.rmExpanded .rmExpandRight:before, .RadMenu_Green .rmGroup .rmLink:hover .rmExpandRight:before, .RadMenu_Green .rmGroup .rmLink.rmFocused .rmExpandRight:before, .RadMenu_Green .rmGroup .rmLink.rmSelected .rmExpandRight:before {
background-position: -117px -1167px; }
.RadMenu_Green .rmGroup .rmLink.rmExpanded .rmExpandLeft:before, .RadMenu_Green .rmGroup .rmLink:hover .rmExpandLeft:before, .RadMenu_Green .rmGroup .rmLink.rmFocused .rmExpandLeft:before, .RadMenu_Green .rmGroup .rmLink.rmSelected .rmExpandLeft:before {
background-position: -117px -1117px; }
.RadMenu_Green .rmGroup .rmLink.rmDisabled, .RadMenu_Green .rmGroup .rmLink.rmDisabled:hover {
color: #d7d7d7;
background-image: none !important;
background: none; }
.RadMenu_Green .rmGroup .rmLink.rmDisabled .rmExpandTop:before, .RadMenu_Green .rmGroup .rmLink.rmDisabled:hover .rmExpandTop:before {
background-position: -17px -1017px; }
.RadMenu_Green .rmGroup .rmLink.rmDisabled .rmExpandDown:before, .RadMenu_Green .rmGroup .rmLink.rmDisabled:hover .rmExpandDown:before {
background-position: -17px -1067px; }
.RadMenu_Green .rmGroup .rmLink.rmDisabled .rmExpandRight:before, .RadMenu_Green .rmGroup .rmLink.rmDisabled:hover .rmExpandRight:before {
background-position: -17px -1167px; }
.RadMenu_Green .rmGroup .rmLink.rmDisabled .rmExpandLeft:before, .RadMenu_Green .rmGroup .rmLink.rmDisabled:hover .rmExpandLeft:before {
background-position: -17px -1117px; }
.RadMenu_Green .rmSlide .rmHorizontal .rmItem {
margin-bottom: 0; }
.RadMenu_Green .rmVertical .rmGroup,
.RadMenu_Green .rmSlide .rmGroup .rmGroup,
.RadMenu_Green .rmVertical .rmScrollWrapContainer {
border-top: 1px solid #ededed; }
.RadMenu_Green .rmVertical .rmScrollWrapContainer .rmVertical {
border: 0; }
.RadMenu_Green .rmMultiColumn {
background: #ffffff;
box-shadow: 0 3px 3px rgba(122, 122, 122, 0.7); }
.RadMenu_Green .rmMultiColumn .rmGroup {
box-shadow: none; }
.RadMenu_Green .rmGroup .rmLeftArrow,
.RadMenu_Green .rmGroup .rmRightArrow {
height: 34px; }
.RadMenu_Green .rmGroup .rmLeftArrow {
background-position: -20px -1107px; }
.RadMenu_Green .rmGroup .rmLeftArrow:hover {
background-position: -70px -1107px; }
.RadMenu_Green .rmGroup .rmRightArrow {
background-position: -20px -1157px; }
.RadMenu_Green .rmGroup .rmRightArrow:hover {
background-position: -70px -1157px; }
.RadMenu_Green .rmHorizontal .rmRootLink .rmToggle {
margin-top: 4px;
margin-bottom: 4px;
height: 30px; }
.RadMenu_Green .rmHorizontal .rmRootLink:hover .rmToggle,
.RadMenu_Green .rmHorizontal .rmRootLink.rmFocused .rmToggle,
.RadMenu_Green .rmHorizontal .rmRootLink.rmSelected .rmToggle,
.RadMenu_Green .rmHorizontal .rmRootLink.rmExpanded .rmToggle {
margin-top: 0; }
.RadMenu_Green .rmRootLink .rmIcon {
background-image: url('Menu/rmArrows.png'); }
.RadMenu_Green .rmHorizontal .rmRootLink .rmIcon {
background-position: 50% -67px; }
@media screen\9 {
.RadMenu_Green .rmHorizontal .rmRootLink .rmIcon {
background-position: -2px -67px; } }
.RadMenu_Green .rmVertical .rmRootLink .rmIcon {
background-position: 50% -167px; }
@media screen\9 {
.RadMenu_Green .rmVertical .rmRootLink .rmIcon {
background-position: -2px -167px; } }
.RadMenu_Green .rmVertical .rmRootLink:hover .rmIcon, .RadMenu_Green .rmVertical .rmRootLink.rmFocused .rmIcon {
background-position: 50% -567px; }
@media screen\9 {
.RadMenu_Green .rmVertical .rmRootLink:hover .rmIcon, .RadMenu_Green .rmVertical .rmRootLink.rmFocused .rmIcon {
background-position: -2px -567px; } }
.RadMenu_Green .rmVertical .rmRootLink.rmDisabled .rmIcon {
background-position: 50% -167px; }
@media screen\9 {
.RadMenu_Green .rmVertical .rmRootLink.rmDisabled .rmIcon {
background-position: -2px -167px; } }
.RadMenu_Green .rmRootGroup .rmHorizontal .rmText {
line-height: 34px; }
html .RadMenu_Green_rtl .rmVertical.rmToggleHandles .rmRootLink .rmText {
padding-right: 15px;
padding-left: 35px; }
html .RadMenu_Green_rtl .rmHorizontal .rmRootLink .rmLeftImage {
margin-left: -8px;
margin-right: 5px; }
@media screen\9 {
html .RadMenu_Green_rtl .rmVertical .rmRootLink .rmLeftImage {
margin-left: -5px; } }
html .RadMenu_Green_rtl .rmVertical .rmRootLink .rmIcon {
background-position: 50% -117px; }
@media screen\9 {
html .RadMenu_Green_rtl .rmVertical .rmRootLink .rmIcon {
background-position: -2px -117px; } }
html .RadMenu_Green_rtl .rmVertical .rmRootLink:hover .rmIcon, html .RadMenu_Green_rtl .rmVertical .rmRootLink.rmFocused .rmIcon {
background-position: 50% -517px; }
@media screen\9 {
html .RadMenu_Green_rtl .rmVertical .rmRootLink:hover .rmIcon, html .RadMenu_Green_rtl .rmVertical .rmRootLink.rmFocused .rmIcon {
background-position: -2px -517px; } }
html .RadMenu_Green_rtl .rmRootGroup .rmSeparator .rmText {
border-color: #fefefe #e3e2e2 #e3e2e2 #fefefe; }
html .RadMenu_Green_rtl .rmRootGroup .rmLast {
border-left: 0; }
html .RadMenu_Green_rtl .rmGroup .rmLink .rmExpandTop {
background-position: left -8px; }
html .RadMenu_Green_rtl .rmGroup .rmLink .rmExpandDown {
background-position: left -58px; }
html .RadMenu_Green_rtl .rmGroup .rmLink .rmExpandLeft {
background-position: left -108px; }
html .RadMenu_Green_rtl .rmGroup .rmLink .rmExpandRight {
background-position: left -158px; }
html .RadMenu_Green_rtl .rmGroup .rmLink:hover .rmExpandTop, html .RadMenu_Green_rtl .rmGroup .rmLink.rmFocused .rmExpandTop, html .RadMenu_Green_rtl .rmGroup .rmLink.rmSelected .rmExpandTop, html .RadMenu_Green_rtl .rmGroup .rmLink.rmExpanded .rmExpandTop {
background-position: left -408px; }
html .RadMenu_Green_rtl .rmGroup .rmLink:hover .rmExpandDown, html .RadMenu_Green_rtl .rmGroup .rmLink.rmFocused .rmExpandDown, html .RadMenu_Green_rtl .rmGroup .rmLink.rmSelected .rmExpandDown, html .RadMenu_Green_rtl .rmGroup .rmLink.rmExpanded .rmExpandDown {
background-position: left -458px; }
html .RadMenu_Green_rtl .rmGroup .rmLink:hover .rmExpandLeft, html .RadMenu_Green_rtl .rmGroup .rmLink.rmFocused .rmExpandLeft, html .RadMenu_Green_rtl .rmGroup .rmLink.rmSelected .rmExpandLeft, html .RadMenu_Green_rtl .rmGroup .rmLink.rmExpanded .rmExpandLeft {
background-position: left -508px; }
html .RadMenu_Green_rtl .rmGroup .rmLink:hover .rmExpandRight, html .RadMenu_Green_rtl .rmGroup .rmLink.rmFocused .rmExpandRight, html .RadMenu_Green_rtl .rmGroup .rmLink.rmSelected .rmExpandRight, html .RadMenu_Green_rtl .rmGroup .rmLink.rmExpanded .rmExpandRight {
background-position: left -558px; }
html .RadMenu_Green_rtl .rmGroup .rmLink .rmExpandTop:before,
html .RadMenu_Green_rtl .rmGroup .rmLink .rmExpandDown:before,
html .RadMenu_Green_rtl .rmGroup .rmLink .rmExpandRight:before,
html .RadMenu_Green_rtl .rmGroup .rmLink .rmExpandLeft:before {
right: auto;
left: 5px; }
html .RadMenu_Green_rtl .rmGroup .rmLeftImage {
margin: 7px 6px 0px 0px; }
html .RadMenu_Green_rtl .rmRoundedCorners .rmSlide,
html .RadMenu_Green_rtl .rmShadows .rmSlide,
html .RadMenu_Green_rtl div.rmRoundedCorners,
html .RadMenu_Green_rtl div.rmShadows {
padding: 0; }
html div.RadMenu_Green .rmRootGroup {
text-align: center;
line-height: 30px;
}
html .RadMenu_Green .rmItem {
float: none;
display: inline-block;
}
0

Shinu
Top achievements
Rank 2
answered on 20 Jun 2014, 11:28 AM
Hi Dennis,
Please do the following modification in your CSS which works fine at my end.
CSS:
Thanks,
Shinu.
Please do the following modification in your CSS which works fine at my end.
CSS:
html .RadMenu_Green .rmItem {
float : inherit;
display
: inline-
block
;
}
Thanks,
Shinu.