Skip to main content

ASPxMenuBase.SubMenuItemStyle Property

Gets the style settings for all submenu items within the current menu control.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v23.2.dll

NuGet Package: DevExpress.Web


public virtual MenuItemStyle SubMenuItemStyle { get; }

Property Value

Type Description

A MenuItemStyle object that contains the style settings for the menu’s submenu items.


The SubMenuItemStyle property provides access to the style settings which define the appearance style of all submenu items within the current menu control.

A specific item style can be applied to a particular menu item’s subitems by using the item’s MenuItem.SubMenuItemStyle property.

The appearance of the client regions of all submenus within the menu control can be customized via the ASPxMenuBase.SubMenuStyle property.


This part of the Tabbed Menu demo illustrates how to customize the ASPxMenu control as a hierachical menu (with popped out submenus) which looks like a set of tabs.

Gradient borders for the menu’s root items (tabs) are drawn by using the RootItemTextTemplate property. The control’s style settings are defined via the ASPxMenuBase.ItemStyle property, ASPxMenuBase.SubMenuStyle property,etc.

<dxm:ASPxMenu EnableTheming="False" ID="ASPxMenu1" CssClass="TabbedMenu" 
runat="server" AppearAfter="0" DataSourceID="XmlDataSource1" ItemSpacing="0px" 
SeparatorHeight="28px" SeparatorWidth="1px" ShowSubMenuShadow="False" 
BorderBetweenItemAndSubMenu="HideRootOnly" Font-Names="Tahoma" Font-Size="8pt" 
Font-Underline="False" ForeColor="Black" AutoPostBack="True" SyncSelectionMode="None" 
ClientInstanceName="tabbedMenu" AllowSelectItem="True" SelectParentItem="True">
     <ItemStyle CssClass="rootItem" Wrap="False">
         <BackgroundImage ImageUrl="~/Menu/Images/TabbedMenu/RootItemSeparator.gif" 
         Repeat="NoRepeat" HorizontalPosition="right" />
         <Paddings Padding="0px" />
         <HoverStyle CssClass="rootItemHover">
         <SelectedStyle CssClass="rootItemSelected">
     <Paddings Padding="0px" />
     <Border BorderStyle="None" />
     <RootItemSubMenuOffset X="-1" Y="-2" FirstItemX="-1" FirstItemY="-2" LastItemX="-1"
         LastItemY="-2" />
     <SubMenuStyle GutterWidth="0px" ItemSpacing="0px" BackColor="White" CssClass="menu">
         <Paddings Padding="1px" />
         <Border BorderColor="#919191" BorderStyle="Solid" BorderWidth="1px" />
     <SubMenuItemStyle Wrap="False">
         <HoverStyle BackColor="#EDEDED">
             <Border BorderWidth="0px" />
         <Paddings Padding="5px" PaddingLeft="7px" PaddingRight="7px" />
     <VerticalPopOutImage Height="5px" Url="~/Menu/Images/TabbedMenu/ItemArrow.gif" 
     Width="4px" />
     <ItemSubMenuOffset X="-1" Y="-2" FirstItemY="-3" LastItemY="-2" />
     <LinkStyle Color="Black">
         <Font Underline="False"></Font>
         <div><table cellpadding="0" cellspacing="0" border="0"><tr>
         <th class="WhiteBorderRight">
         <dxe:ASPxLabel ID="lblText" runat="server" EnableTheming="False" Text='<%# Eval("Text") %>' />
See Also