ASP:Menu: Want to style bulleted lists using CSS

I am currently utilizing ASP:Menu and I would like to customize the menu display as outlined below. Can you please advise on how to implement the CSS styling and what modifications are required?

Products

  • Instock
  • Out-of-Stock

Orders

  • Purchase Orders
  • Sales Orders
    • Back Orders
    • Invoices

Below is the ASP:Menu code snippet.

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

Update1: The current HTML generated by ASP:Menu can be seen 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>

asp.netcssaspmenuaspmenu-controlbulletedlist

Answer №1

Below is a sample of CSS code that you can use:

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; }

Please note that there are issues with your HTML code.

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

When nesting lists, make sure to follow this structure:

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

This highlights an issue with .NET controls - they can lead developers to overlook basic HTML concepts in favor of quick solutions.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the Bootstrap navbar to not toggle when the button is clicked?

Attempting to create a website featuring a collapsible navbar, but encountering some issues. The button is properly identified with the correct ID assigned. Jquery and bootstrap have been included in the necessary order at the bottom of the body. However, ...

htmlcssbootstrap-4

What sets apart Firefox and Chrome when it comes to interpreting the widths of flex items?

Looking to create a column layout using flexbox with three divs that span the full width of their parent container while maintaining a single line height. If the content in the center div overflows, I want it to display an ellipsis at the end. Check out t ...

cssfirefoxflexbox

Tips for styling a PHP file using CSS and styling more than one element:1. Begin by creating a

I am currently attempting to style a php file using a linked stylesheet, but I am encountering some difficulties. At the moment, I have the , it will affect either the font or the border.</p> Is there a way to apply multiple styles to elements on a ...

phphtmlcss

Create code based on a string input

I have a class named Template with a method called Render(string). I need to provide data to this method template. For example, I sent: <% for (int i = 0; i < 5; i++) { Console.WriteLine("*") } %> The Render method receives this string and writ ...

c#asp.net.netcode-behind

Assigning the window.location in the code behind to a LinkButton's onClientClick event

Is it really this difficult? I am trying to change window.location onclientclick of a linkbutton and do this from the code behind. lb.OnClientClick = "window.location = 'Contact.aspx'"; It's not working, just refreshes the current page. l ...

c#asp.netlinkbuttononclientclick

What happens if a web service is not triggered when the return type is modified in the signature?

After creating an asp.net web service, I integrated it using jquery ajax. The specific jquery ajax method used is as follows: $.ajax( { type: "POST", url: "../../Search/Address.aspx/Search2", contentType: "application/jso ...

jqueryasp.net.netajax

The third @media query for max-width is not functioning as expected in the CSS

Looking to create a responsive card section on my website for various screen sizes. The goal is to display 5 cards per row when the screen width is greater than 1300px, maintain 3 cards per row from 1024px to 1300px, and then switch to only 2 cards per row ...

htmlcssresponsive-designmedia-queries

Tips for vertically aligning elements within the body while excluding the navbar from being centered

On my webpage, I have a navigation bar and a lot of content. The code structure looks something like this: .container { display: flex; justify-content: center; align-items: center; } <div class="navbar"> <!-- Various links for navigation ...

htmltwitter-bootstrapcssflexbox

Customize elements such as MuiTab that rely on media queries

Looking to customize the font size for MuiTab using CSS overrides. While following the material-ui documentation for CSS overrides, I successfully adjusted the font size for most elements. However, I encountered an issue with elements that utilize media q ...

cssmaterial-ui

The modal is functioning properly on Firefox and Internet Explorer, but it is experiencing issues

Having an issue with my modal not functioning properly in Chrome. When I click on it, only the background fades and both the before and after content load in the Chrome Dev tools simultaneously with no visible content in between. Here is a link to the Cod ...

javascriptcssmodal-dialog

Is it achievable to modify the appearance of the "Saved Password" style on Firefox?

After creating a login page that initially had a certain aesthetic, I encountered an issue when saving login data in Firefox. The saved login page took on a yellow-ish tint that was not present in my original design: https://i.sstatic.net/LURG3.png I am ...

javascripthtmlcssfirefox

Storing DataGridView Data in an XML Document

So, I've come across a few different posts on this topic and each one provides a unique answer that doesn't quite fit my scenario: My situation involves a DataGridView that gets filled row by row through user interaction and button clicks only ( ...

c#asp.netxmldatagridview

Maintain the image's aspect ratio by setting the width equal to the height when the height is

I am uncertain if achieving this purely with CSS is possible, but it would be ideal. I currently have an image: <img src="#" class="article-thumb"> CSS: .article-thumb { height: 55%; } Is there a way to set the width equal to the height? My g ...

htmlcss

Tips for resolving alignment issues in a chat box:

I am currently working on adjusting the alignment of my chat box app. I have placed 3 div elements with the class .bubble inside a div with the class .chatlines, but they appear to be clustered together instead of aligned properly. It's challenging to ...

htmlcssalignmenttext-alignmentdivide

Utilizing Angular and the Kendo UI framework to customize the dimensions of a Kendo window

Is there a way to dynamically set the height and width of the kendo window based on the content of the kendo grid? Below is the code snippet for my kendo-window: <div kendo-window="Operation.OperCustWind" k-width="800" k-height="700" ...

javascripthtmlcssangularjskendo-ui

Design interactive elements such as buttons and input fields inspired by the layout of Google websites

Does anyone know how to achieve the sleek, lightweight buttons and text boxes seen on Google's web pages like Google Search, Google Plus, and Google Play? I am currently using JSP and CSS, but I am open to incorporating jQuery if necessary. Any help w ...

jquerycssjsp

Comparing the efficiency of Jquery draggable with thousands of elements versus updating the elements continuously

Currently, I am developing an application that involves dragging an image using Jquery's draggable utility. The image is accompanied by several overlay divs containing various components positioned based on pixel locations, sometimes reaching into the ...

javascriptjqueryhtmlcssjquery-ui

Why is the column width on this Tumblr page constantly flickering?

Seeking assistance with a minor issue on my Tumblr page - the content column seems to be flickering on mouseover, shifting between full width and its original programmed width. Any insight on the CSS causing this? Much appreciated! Check it out here (Dis ...

htmlcssthemestumblr

How to implement a scrollbar for tables using Angular

How can I implement a vertical scroll bar only for the table body in my Angular code? I want the scroll bar to exclude the header rows. Since all rows are generated by ng-repeat, I am unsure how to add overflow style specifically for the table body. Here ...

javascripthtmlcssangularjs

Choose the first and last div element in the selection

Is there a way to target the first and fourth div elements using the :nth-child selector for styling purposes? .main{ width:460px; height:240px; } .box{ width:100px; height:100px; background:red; float:left; margin:10px; } /*I tried */ . ...

htmlcsscss-selectors