I will present a technique to display a multi-level unordered list in the form of a tree with lines connecting nodes.

Our intention is to avoid cluttering the HTML code with unnecessary tags. Ideally, the code would be as simple as this:

<ul class=”tree”> <li>Animals <ul> <li>Birds</li> <li>Mammals <ul> <li>Elephant</li> <li>Mouse</li> </ul> </li> . . . </ul>

So it’s just a regular multi-level unordered list, with no additional elements. The only thing that indicates it’s a tree is the tree class added to the first-level <ul> element. Without styling, the above code produces a familiar result:

Bullets Be Gone

The first thing that we need to do is get rid of the ugly bullets. We accomplish this by setting the list-style-type property to none. Read more…

• Top Useful CSS Tips For Beginners
• 150 CSS Examples
• CSS Universal (*) Selector
• CSS3 Multi Column Feature
• Introduction to CSS3
• How to create Rounded Corners Using CSS without Images
• Explaining CSS Positioning
• Which CSS Propertise using in Email Templates
• Variables in CSS?
• CSS QUOTES