Improving the Visual Presentation of a CSS Drop-Down Menu

Drop-down menus are one of the most popular and useful elements of web-based user interfaces. However, building them using a clean, tight (X)HTML structure is a skill that requires some time to master. Based upon this concept, this series of friendly tutorials guides you through the procedure for creating a highly-accessible drop-down menu, by utilizing only well-structured markup, along with a few simple CSS styles and some JavaScript code.

In the last tutorial, I used numerous code samples to show you how to modify the original source code of the menu to make it compatible with Internet Explorer 6 and below. Of course, as you might have guessed, this adaptation was performed with the assistance of a simple JavaScript function whose main objective was to display/hide the corresponding menu items via the programmatic manipulation of their respective class attributes.

Indeed, the definition and implementation of the aforementioned JavaScript function wouldn’t be necessary actually, if IE 6 had the native capacity to support the “hover” CSS pseudo-class for all of the elements of a given web document (not only links), but right, as far as Microsoft web browsers are concerned, this feature is only available in IE 7.

All right, now that I have reviewed the concepts deployed in the preceding article of the series, I think it’s time to talk about the subject of the current tutorial. IN this final part of the series I’ll show you how to introduce some minor changes to the original CSS styles of this drop-down menu to make it look visually appealing and eventually more professional.

Hopefully, when you finish reading this article, you’ll have at your disposal a true cross-browser drop-down menu, which can be included in your existing or future web site. So, are you ready to start? Okay, let’s go!