Center RadMenuItems within 100% Width RadMenu

[Dennis]

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!

[Boyan Dimitrov]

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

 

 

[Dennis]

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;
}

[Shinu]

Hi Dennis,

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.