Using the built in RadMenu Separator
RadMenu already supports separators through the RadMenuItem object. You don’t need a different control type—just mark a menu item as a separator and style it.
In the submenu below, the separator appears between the “Owner” item and the “Item” link:
<telerik:RadMenu ID="RadMenu1" runat="server" RenderMode="Lightweight" Flow="Horizontal" CssClass="TabMenu">
<Items>
<telerik:RadMenuItem Text="Home" NavigateUrl="~/Default.aspx" />
<telerik:RadMenuItem Text="Projects" NavigateUrl="~/Project.aspx" />
<telerik:RadMenuItem Text="Cards" >
<Items>
<telerik:RadMenuItem Text="Architect" NavigateUrl="Architect.aspx" />
<telerik:RadMenuItem Text="Bidder" NavigateUrl="Bidder.aspx" />
<telerik:RadMenuItem Text="General Contractor" NavigateUrl="Contractor.aspx" />
<telerik:RadMenuItem Text="Owner" NavigateUrl="Owner.aspx" />
<telerik:RadMenuItem runat="server" IsSeparator="True" CssClass="RadMenuTopSeparator" />
<telerik:RadMenuItem Text="Item" NavigateUrl="Item.aspx" />
</Items>
</telerik:RadMenuItem>
<telerik:RadMenuItem Text="Project Summary" NavigateUrl="~/ProjectSummary.aspx" />
</Items>
</telerik:RadMenu>
Setting IsSeparator="True" tells RadMenu to render this item as a non-clickable, non-selectable separator. It won’t behave like a normal menu item: it can’t be hovered, clicked, or focused, and it’s skipped in keyboard navigation. Functionally, it’s just a visual break inside the menu.
Styling the separator line
Once the item is marked as a separator, you control its appearance entirely with CSS. I looked at the markup that the control creates and discovered that they do this using just the top border. Styling the top border allows you to change the or thickness of the separator line
.RadMenuTopSeparator {
border-top:2px solid gray !important;
}