asp.netcssaspmenuaspmenu-controlbulletedlist

ASP:Menu : Need to apply CSS to make bulleted lists

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

Orders

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>

Solution

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