STYLE SHEETS

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

Poor Best

Rating:

/ 2

December 23, 2009

TABLE OF CONTENTS:

As I usually to do in many of my articles published here on the prestigious Developer Shed network, before I start explaining how to use the "hover" pseudo-class for building a fully-customizable drop-down menu, I'm going to reintroduce the example developed in the previous part. It showed how to utilize the pseudo-class it to create a CSS-based tooltip in a few simple steps.

With that being said, here's the source code corresponding to the example, so pay close attention to it, please:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Simple tooltip using :hover CSS pseudo class</title>

body {

padding: 0;

margin: 0;

background: #eee;

font: 1em Arial, Helvetica, sans-serif;

color: #000;

}

#wrapper {

width: 960px;

margin: 0 auto;

background: #fff;

}

#header, #content, #footer {

padding: 20px;

}

/* news container */

#news {

padding: 20px;

background: #ffffc0;

position: relative;

}

/* news header */

#news h3 {

color: #f00;

}

/* news tooltip */

#news #tooltip {

display: none;

width: 300px;

padding: 10px;

background: #c0ffc0;

font-size: 0.75em;

position: absolute;

top: 0;

left: 400px;

border: 1px solid #000;

}

/* display news tooltip */

#news:hover #tooltip {

display: block;

}

</style>

</head>

<body>

<h1>Simple tooltip using :hover CSS pseudo class</h1>

<h2>Header section</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>

</div>

<h2>Main content section</h2>

<h3>Latest web development articles</h3>

<p>For more helpful web development articles, visit <a href="http://www.devshed.com">Devshed.com</a> right now!</p>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

As you can see above, by positioning the div that houses the tooltip absolutely with reference to its parent container, which has been located relatively on the web document, it's extremely easy to display the tooltip when the mouse is placed over the corresponding parent. This basic example shows a situation where the "hover" pseudo-class can be utilized for creating dynamic sections of an XHTML page without having to appeal unnecessarily to client-side scripting.

The following image depicts pretty clearly how the tooltip is displayed on screen, in response to a "mouseover" event:

It's possible that at this point you agree with me that building a CSS-based tooltip is a pretty useful thing, but that the effort that must be put into the whole development process isn't really worthwhile. Well, it's a valid opinion, certainly. However, as I stated in the introduction, the "hover" pseudo-class allows you to create much more complex web page structures, including hierarchical drop-down menus. Yes, you read that right.

In this particular case, I don't want to tackle such an ambitious project. Still, in the following segment I'll be teaching you how to use the pseudo-class to build a customizable navigation menu.

Does this sound good enough for you? Then click on the link below and keep reading.

Next: Developing a drop-down menu >>