Just an update:
I haven't been able to solve this altogether, but at least I've managed to make the page load in IE6 - and I'm now completly forgetting about IE5.5, even though this menu should in principle work for that browser as well. Not all items in the menu are visible yet, but I'm working on it.
The problem seems to have been, partially at least, inconsistent use of conditionals. In order to make the dropdown/flyouts work, the author of the original
css code used conditionals for the IE browsers:
- HTML: Select all
<li><a href="#"><!--[if IE 7]><!-->LINK</a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
Now, IE7 (and all other more or less standards compliant browsers) should close the <a> tag as expected, but when it comes to IE6 (and supposedly IE5.5) the browser must be fooled into thinking the <a> tag is closed much later, in fact after your entire list:
- HTML: Select all
<li><a href="#"><!--[if IE 7]><!-->LINK</a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">sublink 1</a></li>
<li><a href="#">sublink 2</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
What this should do, is to let IE6 create a table and have the <ul> flow down into it. The reason is that IE5.x and IE6 do not understand li:hover, so the unordered list has to be nested in a table.
This is a bit complicated and I would probably have been much better off with a simpler way of creating these menus, using javascript and
dhtml. But, it s a pure
css menu and it should validate..