CODEWITHSUNDEEP
asp.net.net
colosso
colosso

Reputation: 2525

ASP.NET Static submenu class

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>

Upvotes: 0

Views: 1662

Answers (2)

user1465587
user1465587

Reputation:

You can use following code in your stylesheet

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

and add the above class in your menu.

Upvotes: 1

nunespascal
nunespascal

Reputation: 17724

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>

Upvotes: 0

Related Questions