i think it would be easiest to create a li menu with css styling. for example your html code will be something like:
<ul id="nav">
<li><a href="home.html">Home</a>
<ul>
<li> </li>
</ul>
<li><a href="Eat/EatHome.html">Eat</a></li>
<li><a href="Drink/DrinkHome.html">Drink</a></li>
<li><a href="help.html">Help</a></li>
<li><a href="../options.html">Options</a></li>
</ul>
and your css would be for example:
/*nav*/
#nav {
position:relative;
width:755px;
padding:0 0 28px 15px;
margin-left:11px;
float:center;
list-style:none;
line-height:25px;
background:#004E69;
font-size:12px;
}
#nav LI {
float:left;
margin:0;
padding:0;
display:block;
}
#nav A {
display:inline;
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
background:#004E69;
margin:0;
padding:0px 15px;
border:0;
}
#nav A:hover,
#nav A:active,
#nav A.here:link,
#nav A.here:visited {
color:#FF9900;
}
#nav A.here:link,
#nav A.here:visited {
position:relative;
z-index:102;
}
/*subnav*/
#nav UL {
position:absolute;
left:0;
top:25px;
float:center;
background:#EBEBEB;
width:757px;
margin:0;
padding:3px 3px 8px 10px;
list-style:none;
height:20px;
font-size:11px;
}
#nav UL LI {
float:left;
display:block;
margin-top:1px;
}
#nav UL A {
background:#EBEBEB;
color:#FF3300;
display:inline;
margin:0;
padding:0 10px;
border:0
}
#nav UL A:hover,
#nav UL A:active,
#nav UL A.here:link,
#nav UL A.here:visited {
color:#024e85;
}
just add your own style to it, and your own headings. the second ul li is your sub menu