ASP:Menu : 需要应用 CSS 来制作项目符号列表

Question

我正在使用 ASP:Menu，我希望菜单如下所示。请建议如何应用 CSS 以及我应该进行哪些更改？

产品

• 库存
• 缺货

订单

• 采购订单
• 销售订单
  • 延期交货
  • 发票

ASP:菜单代码如下。

<asp:Menu runat="server" ID="Navigator" MaximumDynamicDisplayLevels="0" StaticDisplayLevels="3" 
Orientation="Vertical" DataSourceID="RelativeSiteMapDataSource"   />

Update1：​​由 ASP:menu 生成的当前 html 如下所示。

<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

你可以使用这个 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; }

请记住，您的 HTML 已损坏。

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

嵌套列表必须遵循以下模式：

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

这是 .NET 控件的问题之一 - 它们将您与 HTML 隔离得太远，为开发人员提供了方便的方法来快速完成工作，而无需了解 HTML 实际工作的基本原理。