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:

Animals

Birds

Mammals

Elephant

Mouse

Reptiles

Plants

Flowers

Rose

Tulip

Trees

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.

ul.tree, ul.tree ul {
list-style-type: none;
}

This is what we get:

Animals

Birds

Mammals

Elephant

Mouse

Reptiles

Plants

Flowers

Rose

Tulip

Trees

Drawing Vertical Lines

We need to draw a vertical line along the side of every list, regardless of
its nesting level. For that purpose, we'll use a tiny (10 pixels high) image
of a vertical line.

vline.png

We put the image in the background of the <ul> element
and add the repeat-y value, which causes the image to be repeated along
the y-axis, creating a vertical line as high as the list itself. We also adjust the
margin and padding properties of the list and list items
(<li>) so that the tree is nicely indented.

Last but not Least

Obviously, the last node in each list requires special treatment. Firstly,
it needs to have a different background image – an L-shaped line segment:

lastnode.png

Secondly, the vertical line in the background of the list must end at the last
node. We can accomplish this by setting the background color of
the last node to white (or whatever other color we're using). The background
of the item is placed over the background of the list, so it will cover the last
segment of the vertical line.

You might notice that adding the last class to list items is
in conflict with our original idea of not cluttering up the HTML code.
Actually, there is an elegant solution to this problem — the
:last-child
pseudo-class. If we were to use it, we would replace the last class
selector with: