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;
WORKING WITH TYPE
113
3
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.
Pages:
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192