Home arrow Style Sheets arrow Creating a Drop-Down Menu with the Hover CSS Pseudoclass

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 8
December 23, 2009
  1. · Creating a Drop-Down Menu with the Hover CSS Pseudoclass
  2. · Review: building a CSS-based tooltip
  3. · Developing a drop-down menu
  4. · Adding dynamic behavior with the hover CSS pseudoclass

print this article

Creating a Drop-Down Menu with the Hover CSS Pseudoclass
(Page 1 of 4 )

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!

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials