CSS Navigation Rollovers With Drop-downs

This post is a continuation of Super Fantastic CSS Navigation Image Rollovers where we created CSS rollovers with a single image, so it would probably be a good idea for you to take a look at that post in order to follow along with this one if you haven’t done so yet. We’re going to take the code from that post, and adapt it to Stu Nicholls’ CSS drop-downs. He has done a great job in creating a multi-level drop-down menu that is verified to work in most browsers, and without any slow loading javascript.

 

Sorry there has been such a delay between these two posts, I’ve been out sick with a nasty cold for a while. I decided that I can finally breath through my nose well enough to finish this thing.

Here is an example of what we’ll be creating. You can find all of the necessary CSS in the header of that page. Keep in mind, I also use Meyer’s Reset CSS sheet which takes care of getting rid of the unordered list’s natural padding and styling. CSS reset style sheets are great for evening the playing field across multiple browsers, because they all have their own styles that they apply to certain elements and they’re never the same.

We’ve already got our image for the navigation rollovers from the previous post, and so now we’re going to introduce the second level of navigation into our HTML: