Vertical List Navigation with Image EffectsBy tapping into background graphics and the :hover selector, you can create a navigation list that will have an attractive background for each list item. Add a contrasting background graphic to the hover state for impressive results (see Example 10-12). Example 10-12. Using background images to create sophisticated navigation effects url(linkhover.gif);}
a:active {color: red;}
#nav, #nav a, #nav li {width: 100px; margin: 0; padding: 0; list-style-type: none;}
li {background-image: url(linkback.gif); border-bottom: 3px solid white;}
(see Figure 10-18). Figure 10-18. Adding background graphics to the list item and hover state to create graphically rich mouseover effects previously unattainable without JavaScript.
NOTE I've changed the display of the anchor element from inline (in-text) to block (followed by a break). This is necessary to match the width of the anchor element to the width of the list item element so that the hover state's background graphic displays properly across all browsers. |
| |||||||||||||||||||