#navigation li li li a:link, #navigation li li li a:visited {
text-transform: none;
padding: 10px;
width: 135px;
height: auto;
}
#navigation li li li a:hover {
background: #ad3514;
}
#navigation li li li a:active {
background: #ed1c24;
}
5. Style the column list items. Add a rule to define a width and height for the column
list items, along with a bottom border. The last of those things makes it easier to
scan the rows within the list, while the width and height settings ensure that the
layout isn??™t affected if the list items have no links within. (If the width and height
settings were omitted, the list items within the columns would show their bottom
borders only underneath their content??™s width??”and not at all if they were empty.)
The height setting is defined in ems rather than pixels, because this makes it possible
for the list items to stretch vertically if the web page??™s text is resized.
#navigation li li li {
width: 155px;
height: 3em;
border-bottom: 1px solid #ad3514;
}
6. Finally, add a rule to float and define a width for the lists that comprise the containers
for the list items styled in the previous step.
#navigation ul ul ul {
border: 0;
width: 155px;
float: left;
position: relative;
}
USING LINKS AND CREATING NAVIGATION
229
5
The dos and don??™ts of web navigation
So, that??™s the end of our navigation chapter. Before we move on to working with layout,
here are a few succinct tips regarding designing web navigation.
Pages:
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326