Creating better-looking lists

1. Create the list. Within the HTML document’s wrapper div, add the following code:
<ul>
<li>List - 1.1
<ul>
<li>List - 2.1</li>
<li>List - 2.2
<ul>
<li>List - 3.1</li>
<li>List - 3.2</li>
<li>List - 3.3</li>
</ul>
</li>
<li>List - 2.3</li>
</ul>
</li>
</ul>
2. Amend the body rule. Add some padding to the body element so that page content
doesn’t hug the browser window edges during testing:
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
padding: 20px;
}
3. Style the list elements. This kind of heavily styled list typically requires you to
define specific property values at one level and then override them if they’re not
required for subsequent levels. This is done by adding the three rules in the following
code block. For this example, the top level of the list (styled via ul) has a
star background image that doesn’t repeat (the 1px vertical value is used to nudge
the image into place so it looks better positioned), and the list-style-type value
of none removes the default bullet points of all lists on the page.
For the second level of lists (the first level of nesting), styled via ul ul, a horizontally
tiling background image is added, giving the impression that the top-level list
is casting a soft shadow. The border-left setting creates a soft boundary to the
nested list’s left, thereby enclosing the content. The padding value ensures that
there’s space around nested lists.
For the third level of lists (the second level of nesting—that is, a nested list within
a nested list), styled via ul ul ul, no specific styles are required, but to deal with
inherited styles from ul ul, background is set to none and border-left is set to 0.
If this weren’t done, third-level lists would also have the shadow background and
dotted left-hand border.
ul {
list-style-type: none;
background: url(better-list-star.gif) 0 1px no-repeat;
}
ul ul {
background: url(better-list-shadow.gif) repeat-x;
border-left: 1px dotted #aaaaaa;

padding: 10px;
}
ul ul ul {
background: none;
border-left: 0;
}

4. Style the list item elements. For the top-level list items, the li rule styles them in
uppercase, adds some padding (to ensure the items don’t sit over the background
image applied in ul), and makes the text bold and gray. For the nested list items,
the li li rule overrides the text-transform property, returning the text to sentence
case, and adds a square gray bullet as a background image. The font-weight
value is an override, and the color setting is darker than for the parent list’s list
items so that the non-bold text of the nested list items stand out. Finally, for the
third-level list items, styled using the selector li li li, a background override provides
a unique bullet point image (a hollow square).
li {
text-transform: uppercase;
padding-left: 20px;
font-weight: bold;
color: #666666;
}
li li {
text-transform: none;
background: url(better-list-square.gif) 0 2px no-repeat;
font-weight: normal;
color: #333333;
}
li li li {
background: url(better-list-hollow-square.gif) 0 2px no-repeat;
}