Fixing Browser Incompatibilities in a CSS Drop-Down Menu - Fixing browser incompatibilities
(Page 3 of 5 )
As I expressed in the previous section, this CSS-based drop-down menu needs the assistance of JavaScript to work with Internet Explorer, in this way solving this relevant incompatibility issue.
Nevertheless, before coding any JavaScript snippets, I'm going to modify the original set of CSS styles that corresponds to the menu, so each of its items can be easily targeted via client-side scripting to hide and show them alternatively.
If the previous explanation sounds rather confusing to you at first, please have a look at the following CSS styles. They have been slightly changed to make the menu's items suitable for being manipulated via JavaScript.
Here's how the aforementioned CSS styles now look:
/* 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 (add an 'over' class attribute to list items for IE */
li:hover ul,li.over ul{
display: block;
}
As you can see, the most significant change I introduced in the above CSS styles consists of adding an "over" class to all of the menu items. This will allow them to be hidden or displayed when the mouse is over its respective top-level element by the means of a simple JavaScript function.
Naturally, this modification would be completely unnecessary if Internet Explorer offered decent support for the "hover" CSS pseudo class, but for the moment you'll have to settle for things being just the way they are.
All right, now it's time to define a simple JavaScript function that will hide/display the corresponding menu items in Internet Explorer (obviously, this isn't required for most non-IE based browsers), so if you want to see how this function will look, please click on the link below and keep reading.
Next: Adding JavaScript to correct browser incompatibilities >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 2 
