ASP：Menu：需要应用CSS来创建项目符号列表

Question

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>

Answer 1

You can use this CSS:

ul.Menu {  margin:0 1.5em 1.5em 1.5em; }
ul.Menu li {     list-style-type:disc; }
ul.Menu ul {     margin:0 3em 1.5em 1.5em; }

Keep in mind that your HTML is broken.

<li class="Menu-Leaf"><a href="http://pdxeon/so.aspx" class="Menu-Link" title="Sales Orders">Sales Orders</a></li>
     <ul>   <--- this should be before the </li>. Lists must be nested. Any tag outside </li> is illegal.

Nested lists must follow this pattern:

<ul>
    <li>
       <ul>
           <li>...</li>
       </ul>
    </li>
</ul>

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.