Fixing Browser Incompatibilities in a CSS Drop-Down Menu

Fixing Browser Incompatibilities in a CSS Drop-Down Menu
(Page 1 of 5 )

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!

blog comments powered by Disqus