I am using ASP:Menu and I would like to have the menu shown as below. Please suggest how to apply the CSS and what changes should I make?
Products
- Instock
- Out-of-Stock
Orders
- Purchase Orders
- Sales Orders
- Back Orders
- Invoices
ASP:Menu code is as below.
<asp:Menu runat="server" ID="Navigator" MaximumDynamicDisplayLevels="0" StaticDisplayLevels="3"
Orientation="Vertical" DataSourceID="RelativeSiteMapDataSource" />
Update1: The current html that is generated by ASP:menu is shown below.
<ul class="Menu">
<li class="Menu-Leaf"><a href="prodxeon/products.aspx"; class="Menu-Link" title="Products">Products</a></li>
<li class="Menu-Leaf"><a href="prodxeon/orders.aspx"; class="Menu-Link" title="Orders">Orders</a></li>
<ul>
<li class="Menu-Leaf"><a href="http://pdxeon/po.aspx" class="Menu-Link" title="Purchase Orders">Purchase Orders</a></li>
<li class="Menu-Leaf"><a href="http://pdxeon/so.aspx" class="Menu-Link" title="Sales Orders">Sales Orders</a></li>
<ul>
<li class="Menu-Leaf"><a href="http://pdxeon/Bso.aspx" class="Menu-Link" title="Back Orders">Back Orders</a></li>
<li class="Menu-Leaf"><a href="http://pdxeon/iso.aspx" class="Menu-Link" title="Invoices">Invoices</a></li>
</ul>
</ul>
You can use this CSS:
Keep in mind that your HTML is broken.
Nested lists must follow this pattern:
This is one of the problems with .NET controls - they isolate you from the HTML far too much, providing the developer with convenient ways to do things quickly, without understanding the fundamentals of how HTML actually works.