The last graphic enhancement we need to apply to our basic horizontal menu is the a:hover pseudo-class which will cause the buttons to change color as the user's mouse interacts with the links. We do not have to define the a:link pseudo-class because we have already defined the A selector which governs how the links appear in their normal state.
- Add the following a:hover pseudo-class rule to your style sheet:
div#topnav a:hover {
color: #000;
background: #69C;
}
The A:HOVER properties change the background of the link to blue and the text color to black when the user's mouse interacts with the link producing a rollover effect! You may choose any color combination that works with your color scheme.
With text links we would normally define all four of the pseudo classes available for links. In the case of menu-type button links, the active and visited classes are generally not appropriate for a navigation user interface. In certain esoteric situations the active state might be used but it is unlikely that we would want to define a visited state for menu buttons!
At this point we have created a fully functioning horizontal menu-based navigation system. Both the horizontal and vertical menus you built in this lecture can be used as the foundation for navigation systems in future web page projects. I highly recommend going back through each of your navigation style sheets and adding comments that explain what each part of the CSS does, for future reference.
But wait! There's more! On the next page I will demonstrate how to create same-width menu buttons.