If you don’t want telescoping menus, then as I see it, you have to scrap the Javascript. It’s giving you zero benefit, and everything you want can be done better with CSS. Your menu is set up such that there are eight main headers, each of which has between 0 and 4 subpages. The headers have GIF buttons. When you are on a header page, the subpages are listed beneath the header as bulleted list items. When you are on a subpage, same thing except the item that you’re on is highlighted. So, the menu looks different on every page. If you are not going to be altering what goes on the menu in the future, I suggest hard-coding every separate page, like you mention. If you are, there may be a way to make the code uniform across the different pages, except for one or two minor variations, but this has the disadvantage of being more difficult, and also taking up more bandwidth.
With that in mind, I suggest you make three classes, one for the headers, one for unselected list items, and one for the selected list items. Put your CSS for the three classes in an external style sheet that you link to. You can even make two external sheets, if you need a different one for Navigator.
For instance, the second header is called ABOUT US, and has two subpages, Approach and History. You can make your code on the History page look something like this:
<a href=“index.htm” class=“header”>
<img src=“images/nav_left_home.gif” alt=“HOME” width=“191” height=“20”>
</a>
<br>
<a href=“about/index.htm” class=“header”>
<img src=“images/nav_left_aboutus.gif” alt=“ABOUT US” width=“191” height=“20”>
</a>
<ul>
<li class=“unselected”><a href=“about/approach.htm”>Approach</a>
<li class=“selected”><a href=“about/history.htm”>History</a>
</ul>
<a href=“about/contactus.htm”>
<img src=“images/nav_left_contactus.gif” alt=“CONTACT US” width=“191” height=“20”>
</a>
etc.
I made a few changes to the existing code. I removed border and align attributes from your img tags - these attributes can be better specified with style sheets. The same with the spacer GIFs. I also added alt attributes, which I mentioned are pretty important.
I put the class attribute on the a tag for headers and the li tag for subpages, but depending on the exact want you look, it may go better on the img tag for headers and the a tag for subpages. Or, it could go on div or span tags.
Does this make any sense?