Fixing Browser Incompatibilities in a CSS Drop-Down Menu
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.
Fixing Browser Incompatibilities in a CSS Drop-Down Menu - Review: the initial source code for the CSS-based drop-down menu (Page 2 of 5 )
As usual with many of my articles on web development, before I dive deeper into the modifications that need to be introduced to the initial version of this drop-down menu to make it function with Internet Explorer, I'd like to show you its complete source code. This will make it fresh in your mind, and give you a much better idea of how the menu does its thing.
That being said, please have a look at the following code sample. It lists the full source code of the aforementioned menu, as it was built during the previous article of the series:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Example of CSS-based Drop-down menu (it doesn't work in IE)</title>
<style type="text/css">
/* reset body styles */
body{
padding: 0;
margin: 0;
background: #fff;
}
/* style unordered list */
ul{
padding: 0;
margin: 0;
list-style: none;
}
/* style menu items */
li{
float: left;
position: relative;
width: 10em;
}
/* position and hide drop-down menu */
li ul{
display: none;
position: absolute;
top: 1em;
left: 0;
}
li > ul{
top: auto;
left: auto;
}
/* display drop-down menu */
li:hover ul{
display: block;
}
</style>
</head>
<body>
<ul>
<li>About Us
<ul>
<li><a href="">Our Staff</a></li>
<li><a href="">Why work with us?</a></li>
<li><a href="">Our profile</a></li>
<li><a href="">More details</a></li>
</ul>
</li>
<li>Services
<ul>
<li><a href="">Graphic Design</a></li>
<li><a href="">Web Design</a></li>
<li><a href="">Web Programming</a></li>
<li><a href="">Software Development</a></li>
</ul>
</li>
<li>Products
<ul>
<li><a href="">Simple AJAX Library</a></li>
<li><a href="">PHP Form Validator</a></li>
<li><a href="">PHP MySQL Connector</a></li>
<li><a href="">PHP Easy Pager</a></li>
<li><a href="">PHP Form Factory</a></li>
</ul>
</li>
</ul>
</body>
</html>
If you take some time and test the above code sample on your non IE-based browser, then quite possibly you'll be pleased with how neatly it works. And the beauty of this menu rests on its complete independence from JavaScript for doing its business properly. Pretty good, right?
However, you should also notice that whenever you test the menu with IE 6 and below, it simply won't work because of its lack of support for the "hover" CSS pseudo-class. Thus, the browser incompatibility must be fixed quickly, since it's highly desirable to get the menu working with IE as well.
Of course, this correction will be achieved by adding a simple JavaScript function to the menu's structure, along with some additional CSS styles, which will come in handy for emulating the "hover" CSS support in Internet Explorer.
Want to see how this will be done? All right, click on the link that appears below and keep reading.
Style Sheets 
/ 2 
Improving the Visual Presentation of a CSS Drop-Down Menu
