IE 6 hack for flyout menus

For my flyout menus I have tried the hack for IE 6 and it doesn’t seem to work 100%. It works for IE 7, FF & Opera OK.

In IE 6 the menu bar title appears twice and the flyout only happens on the second menu bar.

The JS is:
document.writeln(‘<!– Fares –>rn’);
document.writeln(‘<li><a class=”hide” href=”PassengerFeedback.html”>Fares</a>rn’);
document.writeln(‘<!–[if lte IE 6]>rn<a href=”PassengerFeedback.html”>Faresrn<table><tr><td>rn<![endif]–>rnrn’);
document.writeln(‘<ul>rn’);
document.writeln(‘<li><a href=”Fares.html” title=”Fares”>Fares</a></li>rn’);
document.writeln(‘<li><a href=”PassengerFeedback.html” title=”Fares”>Passenger Feedback</a></li>rn’);
document.writeln(‘</ul>rn’);
document.writeln(‘<!–[if lte IE 6]>rn</td></tr></table>rn<![endif]–>rn’);
document.writeln(‘</li>rn’);

My CSS for IE 6 only is:

table {border-collapse:collapse; border:0; margin:0; padding:0;}

.menu ul li a.hide, .menu ul li a:visited.hide {display:block;}
.menu ul li a:hover ul li a.hide {display:block;}

.menu ul li a:hover {color:#FFFFFF; background:#0000CC;} /* Main Navigation Block */
.menu ul li a:hover ul { /* Flyout Navigation Menu */
display:block;
color:#FFFFFF;
position:absolute;
top:0;
left:127px;
width:150px;
}
.menu ul li a:hover ul li a.sub {background:#0000CC; color:#99FF00;} /* Flyout Menu Block */
.menu ul li a:hover ul li a {display:block; background:#0099FF; color:#fff; width:200px;}
.menu ul li a:hover ul li a ul {visibility:visible}

Anyone any ideas as I am pulling my hair out !

Graham
Durban

Also in #JavaScript _↴