Форматирование ASP.Net MenuItem не наследуется дочерними элементами

Question

Я создаю меню ASP.Net 4.5 программно в C#. Элементы верхнего меню отформатированы по моему вкусу, но форматирование не наследуется дочерними элементами. Форматирование, которое меня больше всего интересует, это две вещи: StaticEnableDefaultPopOutImage, который контролирует, появляется ли эта маленькая стрелка рядом с MenuItem, и ItemSpacing. Первый из них имеет значение false в определении asp:Menu и работает для элементов верхнего меню (т. Е. Стрелка не отображается), но не работает для дочерних элементов (маленькая стрелка отображается рядом с дочерними элементами), Последний установлен на 75px, а пункты верхнего меню приятно разнесены. Тем не менее, дочерние элементы и их дочерние элементы забиты рядом друг с другом. Я не уверен, как контролировать это поведение. Наконец, меню определяется на главной странице. Вот мой код меню в Мастер:

<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>

И это мой код:

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);
    }
}

И я прилагаю картину того, как это выглядит, чтобы люди могли видеть, о каких проблемах я говорю.

Любое руководство по форматированию дочерних элементов очень ценится.

Answer 1

Удаление значков со стрелками:

Проблема в том, что StaticEnableDefaultPopOutImage="false" применяется только к статическим уровням меню, и у вас есть StaticDisplayLevels="1", Два других уровня являются динамическими, поэтому вам также нужно DynamicEnableDefaultPopOutImage="false",

Добавление интервалов:

Для добавления расстояния к динамическим уровням вы можете использовать:

<DynamicMenuItemStyle ItemSpacing="75px" />

Применение пользовательских стилей:

В качестве альтернативы пользовательские стили могут быть применены к каждому уровню меню. Это даст вам больше контроля над тем, как выглядит меню. В вашем меню объявите стили для уровней пунктов меню, используя LevelMenuItemStyles, Например, здесь я добавляю классы стилей для первых 3 уровней пунктов меню:

<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>

Тогда вы сможете настроить стили элементов меню, например

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