In an earlier lecture we looked at the four different pseudo-classes for links:
- a:link
- a:visited
- a:hover
- a:active
Only two of these states are appropriate for the menu-type effect we are trying to achieve - a:link and a:hover.
In this example we don't need to style the a:link pseudo-class because we have already defined the A selector which governs how the links appear in their normal state.
We do need to define the a:hover pseudo-class since this is what gives us the rollover effect we are looking for.
- Add the following a:hover pseudo-class definition to your style sheet:
div#sidebar a:hover {
background-color: #69C;
color: #000;
}
Now when we move the mouse over a menu button, the background and text colors change letting the user know, graphically, that this is a clickable menu item.
The navigation menu should look like the example below when the mouse hovers over a link button. Of course you may choose any color and background color for the rollover that you wish.
There is one more small addition to our vertical navigation styles which will ensure that our buttons look the way we intend in all browsers.