I'm not sure if your design idea is the best approach, but I'll give you a little blurb anyway about how to go about this:
Create one really big HTML file (The people accessing this page will have to wait for such a big file all at once but we can worry about optimizing client experience later)
In that big HTML file, type everything you want your site default home page to be.
Then make one <div> for EVERY menu page you wish to be able to display. Give each one a unique ID. Doesn't matter what your naming convention is as long as each one is unique.
I personally would do something like
So basically you will have one div for every menu item. Whatever you want to be displayed for a menu choice will go inside those divs.
<li onclick='foo_sauce("menu1-1");'>Show Diving Torches</li>
<li onclick='foo_sauce("menu1-2");'>Show Mining Torches</li>
<li onclick='foo_sauce("menu5-20");'>Show SomeOther Torches</li>
If you are having trouble with positioning, just remember that there are two types of elements in html in regards to positioning: block and inline. Inline elements don't mind sitting beside another element, but block elements INSIST that they have nothing else beside them, even if there's more than enough room to fit. There are very few ways to get around this stubborn behaviour of block elements. Use "float: left" or "display: inline-block" if you would like a block element to have things beside it.
Hope that helps!