Finishing a Drop-Down Menu with the Hover CSS Pseudoclass

The reason I’m saying that "hover" CSS pseudo-classes have undergone a rebirth is simple: over the endless years of its rebellious existence, Internet Explorer 6 made it impossible to use “hovers” other than for styling <a> elements in their hovering state. This has been an extremely frustrating experience, considering  that other browsers, like Firefox, Opera and so forth, have offered complete support for this pseudo-class for a long time. 

Fortunately, with the release of IE 7 and 8 (version 9 is coming soon, according to Microsoft) and users making the long-awaited upgrades, the “hover” CSS pseudo-classes can now be used with relative confidence for creating web page elements that not only look pleasant to the human eye, but that use dynamic behavior without the need to write any JavaScript code.

To demonstrate how useful CSS pseudo-classes can be, in previous installment of this series I developed three concrete examples where they were utilized: first for changing the background colors of some divs; then for building a simple tooltip; and finally, for constructing a fancy drop-down menu. In this last case, the menu was left in a rather incomplete state; it allowed users to navigate only to the “Home,” “About Us” and “Products” sections of a fictional web site, which isn’t very functional.

To address the issue mentioned above, in this last episode of the series I’ll be giving the final touches to this sample menu by adding to it the typical “Services” and “Contact” sections, which also will work by means of a few extra CSS pseudo-classes.

Are you eager to see how this will be accomplished? Then start reading now!