Remove vertical separator from radmenu

[Zach]

I am attempting to put a radmenu inside of a radgrid gridTemplateColumn. The radmenu appears to have a vertical separator at the end that I have been unable to identify and remove which is underlined in red in the image below. 

Markup is as follows. CSS below.

<!--grid markup removed other than relevant column -->
<telerik:GridTemplateColumn UniqueName="ParentGridMenu" HeaderStyle-Width="24px">
    <ItemTemplate>
        <telerik:RadMenu ID="menuParentRow" runat="server" Width="24px" ClickToOpen="true">
            <Items>
                <telerik:RadMenuItem ImageUrl="~/images/vertical-ellipsis-24.png" runat="server" Height="24px" Width="24px">
                    <Items>
                        <!--items removed as not relevant -->
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
    </ItemTemplate>
</telerik:GridTemplateColumn>

CSS lives in the page with the grid/menu markup.

    .rmRootGroup
   {
       border:none !important;
       background-color:transparent !important;
       background-image:none !important;
   },
.RadMenu_Default .rmVertical a.rmLink:hover,
.RadMenu_Default .rmVertical a.rmFocused,
.RadMenu_Default .rmVertical a.rmSelected,
.RadMenu_Default .rmVertical a.rmExpanded,
.RadMenu_Default .rmVertical a.rmExpanded:hover {
   border:0 !important;
   padding-bottom:1px !important;
   padding-top:1px !important;
   background-color:transparent !important;
   background-image:none !important;
}

[Vessy]

Hello, Zach,

The undesired vertical separator is visualized via a right border with 1px and you can easily remove it with the following CSS override:

        div.RadMenu .rmRootGroup.rmHorizontal>.rmItem, 
        div.RadMenu .rmRootGroup.rmHorizontal>.rmRootScrollGroup>.rmItem {
            border-width: 0;
        }

Please, give this solution a try and let me know in case I can assist you any further on this matter.

Regards,
Vessy
Progress Telerik