Vertical Navigation - IE Hacks


Click on the movie reel icon to view a video demonstration. You may need to watch the video a few times to totally understand the concepts. Feel free to print out the notes and copy the code from the files which are linked at the bottom of the page.

I've returned to my HTML and CSS code so I can show you the hacks that you need to use in order to make this code work in Internet Explorer.

The first issue involves the way IE displays list items. In older versions of IE there will be line breaks between each list item so the green buttons will not stack tightly on top of each other. Add the code displayed below to the CSS style in the head of the document to fix this problem.

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

The next problem is a little trickier. IE only recognizes the hover command when it is applied to the <a> tag. When I use code to identify a pseudo class of hover for a list item, that will not work in IE. The solution is quite a bit of JavaScript which produces the effect I am looking for.

After the ending style tag I add this code

</style>

<script type="text/javascript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replaceÈ
(" over", "");
}
}
}
}
}
window.onload=startList;-->
</script>

</head>

I have not explained the JavaScript because I do not understand it.

In order for the Javascript to work I need to modify my HTML code. Javascript requires that an id of "nav" be assigned to the opening ul tag.

revised HTML

<body>
<ul id="nav">
<li><a href="#">Home</a></li>

Javascript also assigns the li tags a class of "over", this is not a part of my HTML but it is accomplished using JavaScript. I scroll up to the code which causes the inner lists to display and add this code.

original CSS

/* causes sub menu to display when I hover over main menu */
li:hover ul { display: block; }

revised CSS

/* causes sub menu to display when I hover over main menu */
li:hover ul, li.over ul { display: block; }

Basically the Javascript assigns the li tags a class of "over" and our revised CSS add a selector of li.over ul to the style that causes the inner lists to display.

View page with IE hacks