#navigation li ul {
border: 2px solid #ad3514;
width: 465px;
position: absolute;
left: -10000px
}
3. Now, the list item within the nested list needs amending. For the previous exercise,
the #navigation li li rule dealt with the list items in the drop-down, but here it??™s
primarily for the container of the three columns. Therefore, the height and width
settings need to be set to auto to enable the list item to stretch to fit its nested
items. The background image is superfluous, so it??™s replaced by a flat color, and the
border-bottom pair is removed??”the borders will be moved to list items within
the columns.
#navigation li li {
background: #d27448;
height: auto;
width: auto;
}
4. The link rules should be styled next. Since the links are now one level deeper in the
list, instances of li li in the selectors are changed to li li li. In this example,
this change isn??™t technically necessary, but it always pays to keep your selectors as
precise and accurate as possible. For the link and visited states, padding settings
for the top-level links are overridden, as are width and height settings. For the
other states, the border used for the hover and active effects is replaced by a
change in background color. Note that the rule that originally had both the hover
and active states in the selector (#navigation li li a:hover, #navigation li
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
228
li a:active) now only requires the hover state (#navigation li li li a:hover),
because the rules have nothing in common.
Pages:
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325