Creating a Drop-Down Menu with the Hover CSS Pseudoclass
(Page 1 of 4 )
In this penultimate part of a four-part series, you will learn how to use the "hover" CSS pseudo-class to build a fully-functional, CSS-based drop-down menu. The process is fairly straightforward, so you shouldn’t have trouble using this technique when developing navigation bars for your own websites.
Being an important part of the CSS specification, the "hover" CSS pseudo-class can be used for creating a great variety of visual effects on web pages. Best of all, you won't have to write a single portion of JavaScript code to use it this way. Unfortunately, in the past few years, its use has been reduced to styling only <a> HTML elements due to the poor support offered by Internet Explorer 6 and below.
The good news is that nowadays, with more and more users upgrading to IE 7 and up, it's much easier to exploit the full capabilities provided by the "hover" pseudo-class and utilize it in other creative ways. In the previous tutorial I developed a hands-on example to demonstrate how to create fully-customizable tooltips by using the functionality of only one "hover" pseudo-class.
Even though its driving logic was quite simple to grasp, this example hopefully showed you the real power behind this pseudo-class and how it can be used for indirectly styling different CSS selectors with relative ease. However, if building pure CSS-based tooltips doesn't fulfill your expectations yet, let me tell you that "hover" pseudo-classes can be employed for creating more complex web page structures.
Naturally, if you already read the article's title, you know what I'm tasking about here. By using a proper dose of clean markup and some CSS styles it's feasible to build a fancy drop-down menu, which will be displayed consistently on most major browsers.
Provided that the subject has already caught your attention, in this third chapter of the series I'll be explaining how to create the aforementioned menu, whose driving force will be the venerable "hover" CSS pseudo-class. Let's get started!
Next: Review: building a CSS-based tooltip >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 2 
