Center RadMenuItems within 100% Width RadMenu

4 posts, 0 answers
  1. Dennis
    Dennis avatar
    2 posts
    Member since:
    Dec 2013

    Posted 16 Jun 2014 Link to this post

    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!




  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 19 Jun 2014 Link to this post

    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
     

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dennis
    Dennis avatar
    2 posts
    Member since:
    Dec 2013

    Posted 19 Jun 2014 in reply to Boyan Dimitrov Link to this post

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


  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Jun 2014 in reply to Dennis Link to this post

    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.
Back to Top