ASP.Net MenuItem formatting isn't being inherited by the child items

Question

I'm building an ASP.Net 4.5 menu programmatically in C#. The top menu items are formatted to my liking, but the formatting isn't being inherited by the child items. The formatting I'm most concerned with are two things: StaticEnableDefaultPopOutImage, which controls whether that little arrow shows up next to the MenuItem, and ItemSpacing. The former is set to false in the asp:Menu definition and works for the top menu items (ie, no little arrow shows up), but fails to work for the child items (the little arrow does show up next to the child items). The latter is set to 75px, and the top menu items are nicely spaced apart. However, the child items and their child items are crammed next to each other. I'm not sure how to control this behavior. Finally, the menu is defined in a Master Page. Here's my menu code in Master:

<asp:Menu runat="server" CssClass="bgcell_top_nav" ID="menuMain" Orientation="Horizontal" RenderingMode="Table" StaticEnableDefaultPopOutImage="false" Width="100%" ItemWrap="false" Height="250" DynamicVerticalOffset="8" StaticDisplayLevels="1">
    <StaticMenuItemStyle ItemSpacing="75px" />
</asp:Menu>

And this is my code behind:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        //top menu items
        MenuItem ApplicationFunctionality = new MenuItem();
        ApplicationFunctionality.Text = "Applications";
        ApplicationFunctionality.SeparatorImageUrl = "~/images/menu-pipe.png";
        this.menuMain.Items.Add(ApplicationFunctionality);
        MenuItem DatabaseFunctionality = new MenuItem();
        DatabaseFunctionality.Text = "Databases";
        DatabaseFunctionality.SeparatorImageUrl = "~/images/menu-pipe.png";
        this.menuMain.Items.Add(DatabaseFunctionality);

        //sub menu items
        MenuItem Application_Add = new MenuItem();
        Application_Add.Text = "Add";
        ApplicationFunctionality.ChildItems.Add(Application_Add);
        MenuItem Application_Search = new MenuItem();
        Application_Search.Text = "Search";
        ApplicationFunctionality.ChildItems.Add(Application_Search);
        MenuItem Application_Reports = new MenuItem();
        Application_Reports.Text = "Reports";
        ApplicationFunctionality.ChildItems.Add(Application_Reports);

        MenuItem CreateInternalApplication = new MenuItem();
        CreateInternalApplication.Text = "Internal";
        CreateInternalApplication.NavigateUrl = "~/TemplateForms/ApplicationCreationTemplateForm.aspx";
        Application_Add.ChildItems.Add(CreateInternalApplication);
        MenuItem CreateExternalApplication = new MenuItem();
        CreateExternalApplication.Text = "External";
        Application_Add.ChildItems.Add(CreateExternalApplication);
    }
}

And I'm attaching a picture of what this looks like so people can see what the issues are I'm talking about.

Any guidance as to how to format the child items is much appreciated.

Answer 1

Removing arrow icons:

The problem is that StaticEnableDefaultPopOutImage="false" only applies to static menu levels and you have StaticDisplayLevels="1" . The other two levels are dynamic, so you also need DynamicEnableDefaultPopOutImage="false" .

Adding spacing:

For adding spacing to dynamic levels you can use:

<DynamicMenuItemStyle ItemSpacing="75px" />

Applying custom styles:

Alternatively custom styles can be applied to each menu level. This would give you more control on how the menu looks. In your menu declare styles for menu item levels using LevelMenuItemStyles . For example here I'm adding style classes for the first 3 menu item levels:

<asp:Menu runat="server" CssClass="bgcell_top_nav" 
        ID="menuMain" Orientation="Horizontal" RenderingMode="Table"
        StaticEnableDefaultPopOutImage="false" Width="100%"
        ItemWrap="false" Height="250" DynamicVerticalOffset="8"
        StaticDisplayLevels="1">
    <LevelMenuItemStyles>
        <asp:MenuItemStyle CssClass="menuItemLevel1"/>
        <asp:MenuItemStyle CssClass="menuItemLevel2"/>
        <asp:MenuItemStyle CssClass="menuItemLevel3" />
    </LevelMenuItemStyles> 
</asp:Menu>

Then you should be able to customize item level styles of the menu, eg

.menuItemLevel2{
    margin-left:7px;
}
.menuItemLevel3{
    margin-left:12px;
}