Creating a Drop-Down Menu with the Hover CSS Pseudoclass
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.
Creating a Drop-Down Menu with the Hover CSS Pseudoclass (Page 1 of 4 )
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!