0

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>

NewCoder
  • 99
  • 4
  • 13
  • 1
    You don't know how to write the css, or you dont know how to apply css to asp tags? – Forty-Two Aug 28 '12 at 15:51
  • This is a client-side issue. Please show your HTML, not your server-side ASP code. – Diodeus - James MacFarlane Aug 28 '12 at 15:51
  • @Forty-Two: asp:menu has few tags for CSS but in my case I want only the submenu and sub-submenu items to be idented and bulleted. I am not aware of this and hence looking for direction. Sorry if it is a simple question. – NewCoder Aug 28 '12 at 16:09
  • @Diodeus: asp:menu renders the output through html. so I am not puttin the html stuff on the page. I am not able to understand your reply. – NewCoder Aug 28 '12 at 16:10
  • 1
    CSS styles HTML, it does not style .NET. Therefore, the actual HTML being generated is important for others to be able to answer your question. – Diodeus - James MacFarlane Aug 28 '12 at 16:14
  • @Diodeus: I have added the HTML that is currently generated as UPDATE1 in my original post. Please refer the same and let me know what changes I need to make to asp:Menu. thanks. – NewCoder Aug 28 '12 at 17:02

1 Answers1

0

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.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • :thanks for the inputs and html suggestion. I added the above CSS as MenuTest in my stylesheet and tried to reference within CSSClass in asp:menu but it doesn't work. Also my stylesheet gave errors for using "ul". Any suggestions? – NewCoder Aug 28 '12 at 17:33
  • This is what I get in the stylesheet when I hover over "ul" as it underlines it with red color. Validation (CSS 2.1): 'ul' is not a known CSS property name. – NewCoder Aug 28 '12 at 17:38
  • There must be some existing CSS that's doing this. – Diodeus - James MacFarlane Aug 28 '12 at 18:19
  • Thanks.It doesn't allow me to up-vote yet. I will check the stylesheet and get back to you on this. Meanwhile can anyone help me as to which tag in asp:menu I should use to get the display style I am looking for? – NewCoder Aug 28 '12 at 18:43
  • It is not working. I copied in stylesheet but no success. Can anyone suggest what am I doing wrong? – NewCoder Aug 29 '12 at 19:58
  • @diedeus: I have marked it as answered as stylesheet works but I am unable to get the whole issue resolved... – NewCoder Sep 05 '12 at 21:08