I've managed to get IE7 and IE6 to show the menus better but I haven't cured all the problems. I did it the easy way by inserting conditional comments as the styles are so complicated I couldn't quickly find a solution that worked for all browsers.
Insert this in the index.html file head section after the main stylesheet link just before the </head> tag:-
<!--[if ie]>
<style type="text/css">
#nav ul ul { margin:1em 0 0 -72px; }
#topPanel ul { display: block; position: relative; top: 100px; }
</style>
<![endif]-->
<!--[if ie 6]>
<style type="text/css">
body {behavior:url(csshover.htc);}
#nav_container { width: 980px; }
#nav_ul_one { margin-left: 100px; }
#nav_ul_one li { float: left; }
</style>
<![endif]-->
You need to download csshover.htc file Version 1.42.060206 from near the bottom of this page:-
http://www.xs4all.nl/~peterned/csshover.html
There's no need to open it and look at it, just put it in the same folder as the html file.
Firefox and IE6 show the second level nav links side by side under item 1 and I haven't found a solution for that.
Code downloaded to my PC will be deleted in due course.
WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.