This is a migrated thread and some comments may be shown as answers.

RadMenu Expanded, remove white border

1 Answer 69 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Joseph
Top achievements
Rank 1
Joseph asked on 15 Oct 2014, 04:11 PM
I would like to remove the white border on my radmenu.  Attached is an image

<telerik:RadMenu ID="mnuTopBar" runat="server" Width="100%" EnableEmbeddedSkins="false" Skin="TopBar">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Home" />
                    <telerik:RadMenuItem runat="server" Text="Publishers">
                        <Items>
                            <telerik:RadMenuItem runat="server" Text="PYP Publishers" />
                            <telerik:RadMenuItem runat="server" Text="Internet Publishers" />
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Resources" />
                    <telerik:RadMenuItem runat="server" Text="YPMNet" />
                    <telerik:RadMenuItem runat="server" Text="YPM Websites" />
                    <telerik:RadMenuItem runat="server" Text=" " />
                </Items>
            </telerik:RadMenu>


CSS:

/* <RadMenu / Default> */
.RadMenu_TopBar .rmRootGroup,
.RadMenu_TopBar a.rmLink,
.RadMenu_TopBar .rmGroup .rmText,
.RadMenu_TopBar .rmVertical .rmText,
.RadMenu_TopBar .rmLeftArrow,
.RadMenu_TopBar .rmRightArrow,
.RadMenu_TopBar .rmTopArrow,
.RadMenu_TopBar .rmBottomArrow {
  background-image: url('Menu/rmSprite.png');
  background-color: transparent;
}
 
.RadMenu_TopBar .rmRootGroup {
  border: 0px solid #828282;
  background-repeat: repeat-x;
  background-position: 0 -408px;
  background-color: none; }
 
/* <Root items> */
.RadMenu_TopBar,
.RadMenu_TopBar a.rmLink {
  font: normal 12px/28px "Segoe UI", Arial, Helvetica, sans-serif;
  color: #FFF;
  text-decoration: none; }
 
.RadMenu_TopBar a.rmLink,
.RadMenu_TopBar a.rmDisabled,
.RadMenu_TopBar a.rmDisabled:hover {
  background-position: 0 -72px; }
 
.RadMenu_TopBar .rmFirst a.rmLink,
.RadMenu_TopBar .rmFirst a.rmLink:hover,
.RadMenu_TopBar .rmLast .rmText,
.RadMenu_TopBar .rmLast a.rmLink:hover .rmText,
.RadMenu_TopBar .rmVertical a.rmLink,
.RadMenu_TopBar .rmVertical .rmText {
  background-repeat: no-repeat;
  background-position: 0 500px; }
 
.RadMenu_TopBar .rmVertical .rmFirst,
.RadMenu_TopBar .rmVertical .rmLast {
  background: none; }
 
.RadMenu_TopBar a.rmLink:hover,
.RadMenu_TopBar a.rmFocused,
.RadMenu_TopBar a.rmSelected {
  background-color: #ffc90d; }
 
.RadMenu_TopBar .rmHorizontal .rmRootLink span.rmText {
  display: inline;
  padding-left: 12px;
  padding-top: 6px; }
 
.RadMenu_TopBar_rtl .rmRootLink span.rmText {
  padding-right: 12px; }
 
.RadMenu_TopBar_Context_rtl .rmRootLink span.rmText {
  padding-right: 28px; }
 
.RadMenu_TopBar .rmHorizontal a.rmRootLink {
  padding-left: 0; }
 
.RadMenu_TopBar_rtl a.rmRootLink {
  margin-left: 0;
  padding: 0; }
 
.RadMenu_TopBar .rmHorizontal .rmItem > a.rmRootLink {
  width: 100%; }
 
.RadMenu_TopBar ul.rmHorizontal .rmLeftImage {
  margin: 4px -4px 0 6px; }
 
.RadMenu_TopBar_rtl ul.rmHorizontal .rmLeftImage {
  margin: 4px 6px 0 -4px; }
 
.RadMenu_TopBar .rmVertical a.rmLink {
  padding-top: 1px;
  padding-bottom: 1px; }
 
.RadMenu_TopBar .rmVertical a.rmLink:hover,
.RadMenu_TopBar .rmVertical a.rmFocused,
.RadMenu_TopBar .rmVertical a.rmSelected,
.RadMenu_TopBar .rmVertical a.rmExpanded,
.RadMenu_TopBar .rmVertical a.rmExpanded:hover {
  padding-top: 0;
  padding-bottom: 0;
  border-style: solid;
  border-color: #828282;
  border-width: 1px 0; }
 
.RadMenu_TopBar .rmVertical .rmFirst a.rmLink:hover,
.RadMenu_TopBar .rmVertical .rmFirst a.rmFocused,
.RadMenu_TopBar .rmVertical .rmFirst a.rmSelected,
.RadMenu_TopBar .rmVertical .rmFirst a.rmExpanded,
.RadMenu_TopBar .rmVertical .rmFirst a.rmExpanded:hover {
  padding-top: 1px;
  padding-bottom: 0;
  border-top-width: 0; }
 
.RadMenu_TopBar .rmVertical .rmLast a.rmLink:hover,
.RadMenu_TopBar .rmVertical .rmLast a.rmFocused,
.RadMenu_TopBar .rmVertical .rmLast a.rmSelected,
.RadMenu_TopBar .rmVertical .rmLast a.rmExpanded,
.RadMenu_TopBar .rmVertical .rmLast a.rmExpanded:hover {
  padding-bottom: 1px;
  padding-top: 0;
  border-bottom-width: 0; }
 
.RadMenu_TopBar .rmVertical .rmItem a.rmDisabled:hover {
  padding-top: 1px;
  padding-bottom: 1px;
  border-width: 0; }
 
.RadMenu_TopBar a.rmExpanded,
.RadMenu_TopBar a.rmExpanded:hover {
  background-color: #ffc90d; }
 
.RadMenu_TopBar a.rmDisabled,
.RadMenu_TopBar a.rmDisabled:hover {
  color: #7d7d7d;
  background-color: transparent; }
 
/* </Root items> */
/* <Submenu items> */
.RadMenu_TopBar .rmGroup,
.RadMenu_TopBar .rmMultiColumn,
.RadMenu_TopBar .rmGroup .rmVertical {
  border: 1px solid #979797;
  background: white url('Menu/rmVSprite.png') repeat-y 0 0; }
 
.RadMenu_TopBar .rmTopFix,
.RadMenu_TopBar .rmBottomFix,
.RadMenu_TopBar .rmRoundedCorners .rmGroup .rmItem,
.RadMenu_TopBar .rmRoundedCorners li.rmFirstGroupColumn .rmItem,
.RadMenu_TopBar .rmRoundedCorners .rmFirstGroupColumn li.rmFirstGroupColumn .rmItem,
.RadMenu_TopBar .rmRoundedCorners ul.rmHorizontal .rmFirst,
.RadMenu_TopBar_Context.rmRoundedCorners .rmGroup .rmItem,
.RadMenu_TopBar_Context.rmRoundedCorners ul.rmHorizontal .rmFirst {
  background-image: url('Menu/rmVSprite.png');
  background-color: #fff;
  background-repeat: repeat-y; }
 
* html .rmRoundedCorners_TopBar .rmGroup .rmItem,
* html .rmRoundedCorners_TopBar ul.rmHorizontal .rmFirst {
  background-image: url('Menu/rmVSprite.png');
  background-color: #fff;
  background-repeat: repeat-y; }
 
.RadMenu_TopBar .rmRoundedCorners .rmScrollWrapContainer .rmGroup,
.RadMenu_TopBar .rmRoundedCorners .rmScrollWrap .rmItem,
.RadMenu_TopBar .rmRoundedCorners .rmGroupColumn .rmItem,
.RadMenu_TopBar .rmRoundedCorners .rmGroupColumn .rmGroupColumn .rmItem,
.RadMenu_TopBar .rmRoundedCorners .rmHorizontal .rmItem,
.RadMenu_TopBar .rmRoundedCorners .rmScrollWrap .rmVertical,
.RadMenu_TopBar_Context.rmRoundedCorners .rmScrollWrapContainer .rmGroup,
.RadMenu_TopBar_Context.rmRoundedCorners .rmScrollWrap .rmItem,
.RadMenu_TopBar_Context.rmRoundedCorners .rmHorizontal .rmItem,
.RadMenu_TopBar_Context.rmRoundedCorners .rmScrollWrap .rmVertical {
  background-image: none; }
 
* html .rmRoundedCorners_TopBar .rmScrollWrapContainer .rmGroup,
* html .rmRoundedCorners_TopBar .rmScrollWrap .rmItem,
* html .rmRoundedCorners_TopBar .rmHorizontal .rmItem,
* html .rmRoundedCorners_TopBar .rmScrollWrap .rmVertical {
  background-image: none; }
 
.RadMenu_TopBar .rmRoundedCorners .rmGroupColumn {
  background-color: #fff; }
 
.RadMenu_TopBar .rmBottomLeft,
.RadMenu_TopBar .rmRoundedCorners .rmScrollWrapContainer,
.RadMenu_TopBar_Context.rmRoundedCorners .rmScrollWrapContainer,
.RadMenu_TopBar_Context.rmRoundedCorners ul.rmGroup,
.RadMenu_TopBar .rmRoundedCorners ul.rmGroup,
.RadMenu_TopBar .rmRoundedCorners .rmMultiColumn {
  background-image: url('Menu/rmRoundedLeft.png');
  background-color: transparent;
  background-repeat: no-repeat; }
 
* html .rmRoundedCorners_TopBar .rmScrollWrapContainer,
* html .rmRoundedCorners_TopBar .rmGroup ul.rmGroup,
* html .rmRoundedCorners_TopBar ul.rmGroup {
  background-image: url('Menu/rmRoundedLeft.png');
  background-color: transparent;
  background-repeat: no-repeat; }
 
.RadMenu_TopBar .rmTopRight,
.RadMenu_TopBar .rmBottomRight {
  background-image: url('Menu/rmRoundedRight.png');
  background-color: transparent;
  background-repeat: no-repeat; }
 
.RadMenu_TopBar .rmTopFix,
.RadMenu_TopBar .rmBottomFix,
.RadMenu_TopBar .rmRoundedCorners .rmGroup .rmFirst,
.RadMenu_TopBar_Context.rmRoundedCorners .rmGroup .rmFirst,
.rmRoundedCorners_TopBar .rmGroup .rmFirst {
  border-color: #979797; }
 
.RadMenu_TopBar .rmRoundedCorners .rmScrollWrapContainer .rmTopFix,
.RadMenu_TopBar .rmRoundedCorners .rmScrollWrapContainer .rmBottomFix,
.RadMenu_TopBar_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopFix,
.RadMenu_TopBar_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomFix {
  background: #FFF; }
 
* html .rmRoundedCorners_TopBar .rmScrollWrapContainer .rmTopFix,
* html .rmRoundedCorners_TopBar .rmScrollWrapContainer .rmBottomFix {
  background: #FFF; }
 
.RadMenu_TopBar .rmRoundedCorners .rmScrollWrapContainer .rmTopArrow,
.RadMenu_TopBar .rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow,
.RadMenu_TopBar .rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow,
.RadMenu_TopBar .rmRoundedCorners .rmScrollWrapContainer .rmRightArrow,
.RadMenu_TopBar_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopArrow,
.RadMenu_TopBar_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow,
.RadMenu_TopBar_Context.rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow,
.RadMenu_TopBar_Context.rmRoundedCorners .rmScrollWrapContainer .rmRightArrow {
  background-color: #FFF;
  border: 0; }
 
* html .rmRoundedCorners_TopBar .rmScrollWrapContainer .rmTopArrow,
* html .rmRoundedCorners_TopBar .rmScrollWrapContainer .rmBottomArrow,
* html .rmRoundedCorners_TopBar .rmScrollWrapContainer .rmLeftArrow,
* html .rmRoundedCorners_TopBar .rmScrollWrapContainer .rmRightArrow {
  background-color: #FFF;
  border: 0; }
 
.RadMenu_TopBar_rtl .rmBottomLeft,
.RadMenu_TopBar_rtl .rmRoundedCorners ul.rmGroup,
.RadMenu_TopBar_rtl .rmRoundedCorners .rmMultiColumn,
.RadMenu_TopBar .rmRoundedCorners .rmScrollWrapContainer,
.RadMenu_TopBar .rmScrollWrapContainer .rmBottomLeft,
.rmRoundedCorners.RadMenu_TopBar_Context_rtl ul.rmGroup,
.RadMenu_TopBar_Context.rmRoundedCorners .rmScrollWrapContainer {
  background-image: url('Menu/rmRoundedLeft_rtl.png'); }
 
.RadMenu_TopBar_rtl .rmTopRight,
.RadMenu_TopBar_rtl .rmBottomRight {
  background-image: url('Menu/rmRoundedRight_rtl.png'); }
 
.RadMenu_TopBar_rtl li.rmTopFix,
.RadMenu_TopBar_rtl li.rmBottomFix,
.RadMenu_TopBar_rtl .rmRoundedCorners .rmGroup .rmItem,
.rmRoundedCorners.RadMenu_TopBar_Context_rtl .rmGroup .rmItem {
  background-position: 101% 0; }
 
.RadMenu_TopBar .rmSlide .rmScrollWrap {
  background-image: none; }
 
.RadMenu_TopBar_rtl .rmGroup,
.RadMenu_TopBar_rtl .rmMultiColumn,
.RadMenu_TopBar_rtl .rmGroup .rmVertical {
  background-position: 100% 0; }
 
.RadMenu_TopBar .rmRootGroup li.rmItem .rmGroup {
  padding-bottom: 0; }
 
.RadMenu_TopBar .rmRootGroup .rmHorizontal {
  background-image: none; }
 
.RadMenu_TopBar .rmScrollWrap .rmVertical {
  border: 0; }
 
.RadMenu_TopBar .rmRoundedCorners .rmScrollWrapContainer li.rmItem,
.RadMenu_TopBar_Context.rmRoundedCorners .rmScrollWrapContainer li.rmItem,
.rmRoundedCorners_TopBar .rmScrollWrapContainer li.rmItem {
  background: none; }
 
.RadMenu_TopBar .rmGroup .rmItem a.rmLink,
.RadMenu_TopBar .rmGroup .rmItem a.rmLink:hover,
.RadMenu_TopBar .rmGroup .rmItem a.rmFocused,
.RadMenu_TopBar .rmGroup .rmItem a.rmSelected,
.RadMenu_TopBar .rmGroup .rmItem a.rmExpanded {
  padding-top: 0;
  padding-bottom: 0;
  border: 0; }
 
.RadMenu_TopBar .rmGroup .rmLast a.rmLink,
.RadMenu_TopBar .rmGroup .rmLast a.rmLink:hover,
.RadMenu_TopBar .rmGroup .rmLast a.rmFocused,
.RadMenu_TopBar .rmGroup .rmLast a.rmSelected,
.RadMenu_TopBar .rmGroup .rmLast a.rmExpanded {
  padding-bottom: 1px; }
 
.RadMenu_TopBar .rmGroup a.rmLink,
.RadMenu_TopBar .rmGroup .rmText,
.RadMenu_TopBar .rmGroup .rmItem a.rmDisabled,
.RadMenu_TopBar .rmGroup .rmItem a.rmDisabled:hover,
.RadMenu_TopBar .rmGroup .rmItem a.rmDisabled .rmText,
.RadMenu_TopBar .rmGroup .rmItem a.rmDisabled:hover .rmText {
  background-position: 0 500px;
  background-repeat: no-repeat;
  background-color: #192960; /*RED*/}
 
.RadMenu_TopBar .rmGroup a.rmLink:hover,
.RadMenu_TopBar .rmGroup a.rmFocused,
.RadMenu_TopBar .rmGroup a.rmSelected,
.RadMenu_TopBar .rmGroup a.rmExpanded {
  background-position: 0 -168px;
  background-color: #FFC90D;
}
 
.RadMenu_TopBar .rmGroup a.rmLink:hover .rmText,
.RadMenu_TopBar .rmGroup a.rmFocused .rmText,
.RadMenu_TopBar .rmGroup a.rmSelected .rmText,
.RadMenu_TopBar .rmGroup a.rmExpanded .rmText {
  background-position: 100% -192px;
  background-color: #FFC90D;
}
 
/* <expand arrows> */
.RadMenu_TopBar .rmRootGroup .rmExpandRight,
.RadMenu_TopBar .rmGroup .rmExpandDown,
.RadMenu_TopBar_Context .rmGroup .rmExpandRight,
.RadMenu_TopBar .rmRootGroup .rmItem a.rmDisabled .rmExpandRight,
.RadMenu_TopBar .rmGroup .rmItem a.rmDisabled .rmExpandDown,
.RadMenu_TopBar .rmRootGroup .rmItem a.rmDisabled:hover .rmExpandRight,
.RadMenu_TopBar .rmGroup .rmItem a.rmDisabled:hover .rmExpandDown {
  background-position: 100% -216px; }
 
.RadMenu_TopBar a.rmLink:hover .rmExpandRight,
.RadMenu_TopBar .rmLast a.rmLink:hover .rmExpandRight,
.RadMenu_TopBar a.rmFocused .rmExpandRight,
.RadMenu_TopBar a.rmSelected .rmExpandRight,
.RadMenu_TopBar a.rmExpanded .rmExpandRight {
  background-position: 100% -312px; }
 
.RadMenu_TopBar .rmGroup a.rmLink:hover .rmExpandRight,
.RadMenu_TopBar .rmGroup a.rmFocused .rmExpandRight,
.RadMenu_TopBar .rmGroup a.rmSelected .rmExpandRight,
.RadMenu_TopBar .rmGroup a.rmExpanded .rmExpandRight,
.RadMenu_TopBar .rmGroup a.rmLink:hover .rmExpandDown,
.RadMenu_TopBar .rmGroup a.rmFocused .rmExpandDown,
.RadMenu_TopBar .rmGroup a.rmSelected .rmExpandDown,
.RadMenu_TopBar .rmGroup a.rmExpanded .rmExpandDown {
  background-position: 100% -240px; }
 
.RadMenu_TopBar .rmRootGroup a.rmDisabled:hover .rmExpandRight,
.RadMenu_TopBar .rmGroup a.rmDisabled:hover .rmExpandDown {
  background-image: url('Menu/rmSprite.png');
  background-position: 100% -216px; }
 
/* </expand arrows> */
/* <rtl> */
.RadMenu_TopBar_rtl a.rmLink,
.RadMenu_TopBar_rtl .rmRootGroup a.rmDisabled {
  background-position: 100% -96px; }
 
.RadMenu_TopBar_rtl .rmGroup a.rmDisabled {
  background: none; }
 
.RadMenu_TopBar_rtl .rmText {
  background-position: 0 -96px; }
 
.RadMenu_TopBar_rtl .rmVertical a.rmExpanded .rmText,
.RadMenu_TopBar_rtl .rmVertical a.rmExpanded:hover .rmText {
  background-position: 0 500px;
  background-repeat: no-repeat; }
 
.RadMenu_TopBar_rtl .rmGroup a.rmLink:hover,
.RadMenu_TopBar_rtl .rmGroup a.rmFocused,
.RadMenu_TopBar_rtl .rmGroup a.rmSelected,
.RadMenu_TopBar_rtl .rmGroup a.rmExpanded {
  background-position: 100% -264px; }
 
.RadMenu_TopBar_rtl .rmGroup a.rmLink:hover .rmText,
.RadMenu_TopBar_rtl .rmGroup a.rmFocused .rmText,
.RadMenu_TopBar_rtl .rmGroup a.rmSelected .rmText,
.RadMenu_TopBar_rtl .rmGroup a.rmExpanded .rmText {
  background-position: 0 -288px; }
 
.RadMenu_TopBar_Context_rtl .rmVertical .rmExpandLeft,
.RadMenu_TopBar_rtl .rmRootGroup .rmExpandLeft {
  background-position: 0 -312px; }
 
.RadMenu_TopBar_rtl .rmVertical a.rmLink:hover .rmExpandLeft,
.RadMenu_TopBar_rtl .rmVertical a.rmFocused .rmExpandLeft,
.RadMenu_TopBar_rtl .rmVertical a.rmSelected .rmExpandLeft,
.RadMenu_TopBar_rtl .rmVertical a.rmExpanded .rmExpandLeft {
  background-position: 0 -216px; }
 
.RadMenu_TopBar_rtl .rmGroup a.rmLink:hover .rmExpandLeft,
.RadMenu_TopBar_rtl .rmGroup a.rmFocused .rmExpandLeft,
.RadMenu_TopBar_rtl .rmGroup a.rmSelected .rmExpandLeft,
.RadMenu_TopBar_rtl .rmGroup a.rmExpanded .rmExpandLeft {
  background-position: 0 -336px; }
 
.RadMenu_TopBar_rtl .rmRootGroup a.rmDisabled:hover .rmExpandLeft {
  background-position: 0 -312px; }
 
/* </rtl> */
/* </Submenu items> */
/* <Submenu offsets (Default - specific, overlapping submenus)> */
.RadMenu_TopBar .rmSlide {
  margin: 0 0 0 -1px; }
 
.RadMenu_TopBar .rmVertical .rmSlide,
.RadMenu_TopBar .rmSlide .rmSlide,
.RadMenu_TopBar_Context .rmGroup .rmSlide {
  margin: 0 0 0 -5px; }
 
.RadMenu_TopBar_rtl .rmSlide {
  margin: 0 0 0 0; }
 
.RadMenu_TopBar_rtl .rmFirst .rmSlide {
  margin-left: 1px; }
 
.RadMenu_TopBar_rtl .rmVertical .rmSlide,
.RadMenu_TopBar_rtl .rmSlide .rmSlide,
.RadMenu_TopBar_Context_rtl .rmGroup .rmSlide {
  margin: 0 0 0 5px; }
 
/* </Submenu offsets> */
/* <Scrolling arrows> */
.RadMenu_TopBar .rmLeftArrow,
.RadMenu_TopBar .rmRightArrow {
  background-color: #E6E6E6; }
 
.RadMenu_TopBar .rmLeftArrow {
  background-position: -8px -312px;
  border-right: 1px solid #828282; }
 
.RadMenu_TopBar .rmRightArrow {
  background-position: -482px -216px;
  border-left: 1px solid #828282; }
 
.RadMenu_TopBar .rmTopArrow,
.RadMenu_TopBar .rmBottomArrow,
.RadMenu_TopBar .rmGroup .rmLeftArrow,
.RadMenu_TopBar .rmGroup .rmRightArrow {
  background-color: #E6E6E6; }
 
.RadMenu_TopBar .rmTopArrow {
  background-position: 50% -367px;
  border-bottom: 1px solid #828282; }
 
.RadMenu_TopBar .rmBottomArrow {
  background-position: 50% -391px;
  border-top: 1px solid #828282; }
 
/* </Scrolling arrows> */
/* <Separators> */
.RadMenu_TopBar .rmHorizontal .rmSeparator .rmText,
.RadMenu_TopBar .rmVertical .rmHorizontal .rmSeparator .rmText {
  height: 22px;
  margin: 1px 0 0;
  width: 1px;
  background-color: #A8A8A8; }
 
.RadMenu_TopBar_Context .rmSeparator .rmText,
.RadMenu_TopBar .rmHorizontal .rmGroup .rmSeparator .rmText,
.RadMenu_TopBar .rmVertical .rmHorizontal .rmGroup .rmSeparator .rmText {
  background-color: transparent;
  background-position: 0 -406px; }
 
/* </Separators> */
/* </RadMenu / Default> */

1 Answer, 1 is accepted

Sort by
0
Accepted
Boyan Dimitrov
Telerik team
answered on 17 Oct 2014, 03:32 PM
Hello,

Please apply the following style:
//css
html .RadMenu ul.rmGroup {
            padding: 0;
        }



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.

 
Tags
General Discussions
Asked by
Joseph
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Share this question
or