ASP.NET Static submenu class

Question

I have following code:

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" staticdisplaylevels="2"
    EnableViewState="False" IncludeStyleBlock="False" Orientation="Horizontal">
    <Items>
        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Homepage">
            <asp:MenuItem Text="New Element" Value="New Element"></asp:MenuItem>
            <asp:MenuItem Text="New Element" Value="New Element"></asp:MenuItem>
            <asp:MenuItem Text="New Element" Value="New Element"></asp:MenuItem>
        </asp:MenuItem>
        <asp:MenuItem NavigateUrl="~/About.aspx" Text="Info"/>
    </Items>
</asp:Menu>

It's a simple, static .NET Menu control. With the staticdisplaylevels="2" also the submenus are shown statically in the same row like the top menuitems. But I want that the submenu items are shown in another row under the topmenu item row. How can I do that? Is there a way to give a CSS class to all sub menu items that I can position them by CSS?

The generated HTML is the following:

<ul class="level1 static" tabindex="0" style="position: relative; width: auto; float: left;" role="menubar">

<li class="static" role="menuitem" style="position: relative; float: left;">
<a class="level1 static" href="Default.aspx" tabindex="-1">Homepage</a>
</li>

<li class="static" role="menuitem" style="position: relative; float: left;">
<a class="level2 static" href="#" tabindex="-1">New Element</a>
</li>

<li class="static" role="menuitem" style="position: relative; float: left;">
<a class="level2 static" href="#" tabindex="-1">New Element</a>
</li>

<li class="static" role="menuitem" style="position: relative; float: left;">
<a class="level2 static" href="#" tabindex="-1">New Element</a>
</li>

<li class="static" role="menuitem" style="position: relative; float: left;">
<a class="level1 static" href="About.aspx" tabindex="-1">Info</a>
</li>

</ul>

user1465587 · Accepted Answer · 2012-06-19 12:12:16Z

1

You can use following code in your stylesheet

.menu{}
.menu table table {
                   margin-top:10px;}

and add the above class in your menu.

answered Jun 19, 2012 at 12:12

user1465587

Sign up to request clarification or add additional context in comments.

Comments

nunespascal · Accepted Answer · 2012-06-19 11:49:13Z

0

No, there is no inbuilt property to style it.

But you can use a style like this. Given how asp renders its menus(in tables), this will allow you to add styles to the inner tables.

<style>
    .menu{background: #eee;}
    .menu table table {background: #ddd;}
</style>

answered Jun 19, 2012 at 11:49

nunespascal

17.7k2 gold badges45 silver badges46 bronze badges

Collectives™ on Stack Overflow

ASP.NET Static submenu class

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related