Vertical List Navigation with Image Effects
By 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
body {font: bold 15px Georgia, Times, serif; color: black;}a {color: white; text-decoration: none; display: block;}a:link {color: white;}a:visited {color: yellow;}a:hover {color: white; background-image: 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;} ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access