Upon doing so, the list item??™s descendant list??™s
display value is set to block, and it??™s displayed directly underneath the parent
item.
#navigation li:hover ul {
display: block;
left: 0;
}
3. Style nested list items and links. Add the following rule to replace the default
background for list items with one specifically for the drop-down menus. The
border-bottom value visually separates each of the list items.
#navigation li li {
background: url(drop-down-menu-background.gif) repeat-y;
border-bottom: 1px solid #ad3514;
}
Next, add the following rule to style nested list item links, overriding the
text-transform and padding values of top-level list items.
#navigation li li a:link, #navigation li li a:visited {
text-transform: none;
padding-left: 10px;
}
4. The final step is to override the hover and active states. For this example, the
background value for top-level lists is overridden and the background image
removed (meaning the hover state for nested list links has no unique background).
To make the hover state stand out, the links are given a vibrant left border. This
also moves the text inward by the width of the border.
#navigation li li a:hover, #navigation li li a:active {
background: none;
border-left: 5px solid #f7bc1d;
}
USING LINKS AND CREATING NAVIGATION
225
5
These property values are common to both states, apart from the border color
(orange for the hover state and red for the active state, roughly matching the colors
applied to the top-level tab icons in the same states, although the orange is
brighter for the drop-downs so that they stand out more); therefore, add the following
rule to change only the left border??™s color on the active state:
#navigation li li a:active {
border-left-color: #ed1c24;
}
Required files The drop-down-menu folder from the chapter 5 folder.
Pages:
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322