Fixing Browser Incompatibilities in a CSS Drop-Down Menu
(Page 1 of 5 )
Drop-down menus have long been an important part of numerous web-based user interfaces. Since they have been around so long, we've seen many different approaches to building them, from pure JavaScript-driven menus, Flash-based ones, and simple, well-structured (X)HTML markup. This three-article series shows you how to build a drop-down menu using only clean and tight structural markup, along with a few simple CSS styles and a bit of JavaScript code.
Now that I have introduced the subject of this series, let me offer you a brief summary of the topics that I covered in the previous tutorial, in case you didn't have a chance to read it. All right, as I said in the beginning, the purpose of this article series is to illustrate how to create an extensible drown-down menu by utilizing only a combination of standard markup and CSS styles. In this way I hope to demonstrate that seemingly-complex web user interfaces can be created without the need to appeal to complicated development methodologies.
Based upon the previous concept, in the first article of this series I showed you how to build the bare bones structure of a CSS-based drop-down menu. It was comprised originally of some basic (X)HTML unordered lists and links, along with a few straightforward CSS styles. As you'll recall, at the end of that particular tutorial, I turned the menu into a fully-functional piece of code, relying only on the correct support offered by most non-based IE browsers for the "hover" CSS pseudo-class.
Unfortunately, Internet Explorer doesn't support this crucial feature, which means that it'll be necessary to incorporate some JavaScript code into the initial incarnation of this drop-down menu to make it work with IE too. Of course, this implies that part of the accessibility offered by the menu in question must be sacrificed, but that's the cost one has to pay for using non-standard browsers.
So far, so good. Now that you hopefully recalled the most important concepts regarding the development of this CSS-based menu, it's time to see how to add a short piece of JavaScript code to its initial definition, which will make it work seamlessly with Internet Explorer.
With the preliminaries out of the way, let's continue this instructive journey now!
Next: Review: the initial source code for the CSS-based drop-down menu >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 2 
