The menu basically consists of a table for each main menu entry. The table is always one row
by one column wide. This table will open and show its content if clicked once, collapse and hide
its content if clicked once more.
And what does the table field contain: Of course either more table fields (submenus) or links.
The code is written in a way so that only one main menu can be open at a time. But several submenus
can be open at the same time. Furthermore, the menusystem inherently remembers which of the submenus
were open last time you opened the respective main menu.
The links turn red if you hoover over them, the submenus turn grey, so defined by the stylesheet.
The whole menusystem is very simple, links can contain pictures or text, and it runs on Mozilla, Netscape
and even on Windows Explorer.

View the image below as demonstration of the table in the table problem:

Advantages

Compatible to the most used browsers.
Easy and small code, which can be integrated into the same page as the menu.
Submenus remember their state.
Links can contain pictures or simple text.
The table fields can be formatted as you like. (Background, frame)
Optionally an URL can be provided to a menu entry which will be loaded into a predefined frame.

Code

HTML

The parameter in the call jsMenu(); must correspond to the id of the respective table.
One id must only appear once in the whole menusystem.

<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td><a class="mymenu" href="#" onclick="jsMenu('1');return false"><b>Hobbies</b></a>
    <table class="menu">
    <tr id="sub_1" style="display: none;"><td>
        <a class="mymenu" href="#" onclick="jsMenu('1_1');return false">Travelling</a>
            <table class="menu">
            <tr id="sub_1_1" style="display: none;"><td>
                <a class="mymenu" href="#" onclick="jsMenu('1_1_1');return false">1998</a>
               <table class="menu">
                <tr id="sub_1_1_1" style="display: none;"><td>
                    Australia
                   </td></tr></table>
                <a class="mymenu" href="#" onclick="jsMenu('1_1_2');return false">2000</a>
               <table class="menu">
                <tr id="sub_1_1_2" style="display: none;"><td>
                    Canada
                   </td></tr></table>
                <a class="mymenu" href="#" onclick="jsMenu('1_1_3');return false">2001</a>
               <table class="menu">
                <tr id="sub_1_1_3" style="display: none;"><td>
                    <A class="mylink" HREF="costarica/costarica.html" TARGET="middle_ruedi">Costa Rica</A><br>
                     <A class="mylink" HREF="common/travelling/florida/index.html" TARGET="middle_ruedi">Florida</A><br>
                     <A class="mylink" HREF="travelling/paris/index.html" TARGET="middle_ruedi">Paris</A><br>
                      <A class="mylink" HREF="common/travelling/bali/index.html" TARGET="middle_ruedi">Bali/Bangkok</A>
                   </td></tr></table>
                <a class="mymenu" href="#" onclick="jsMenu('1_1_4');return false">2002</a>
               <table class="menu">
                <tr id="sub_1_1_4" style="display: none;"><td>
                      <A class="mylink" HREF="common/travelling/usaw/index.html" TARGET="middle_ruedi">USA the West</A>
                   </td></tr></table>
            </td></tr></table>
       <a class="mymenu" href="#" onclick="jsMenu('1_2');return false">Sport</a>
            <table class="menu">
            <tr id="sub_1_2" style="display: none;"><td>
                <A class="mylink" HREF="sport/ski.html" TARGET="middle_ruedi">Skiing</A><br>
                <A class="mylink" HREF="sport/billard.html" TARGET="middle_ruedi">Billard</A><br>
                <A class="mylink" HREF="/cgi-bin/badminton/badminton.cgi" TARGET="middle_ruedi">Badminton</A>
            </td></tr></table>
        <A class="mylink" HREF="modelairplane.html" TARGET="middle_ruedi">Model Airplane</A>
    </td></tr></table>
</td></tr>
</table>

Stylesheet

    <style type="text/css">
            a.mymenu:link{     color : black;    text-decoration : none; }
            a.mymenu:visited{ color : black; text-decoration : none; }
            a.mymenu:active{     color : gray; text-decoration : none;}
            a.mymenu:hover { color : gray; text-decoration : none; }
            a.mymenu:focus{     color : black; text-decoration : none;}

            a.mylink:link{     color : black;    text-decoration : none; }
            a.mylink:visited{ color : black; text-decoration : none; }
            a.mylink:active{     color : red;     text-decoration : none;}
            a.mylink:hover { color : red; text-decoration : none; }
            a.mylink:focus{     color : red;     text-decoration : none;}

             table.menu {cellpadding:0; cellspacing:0; border:0; margin-left:10;}
   </style>

Javascript

If you don't want to collapse the other main menus when opening an other one, then simply
omit the 'for' loop.

function jsMenu(val, url) {
     // toggle menu
     document.getElementById("sub_"+val).style.display =
     (document.getElementById("sub_"+val).style.display=="none")?
     (navigator.appName=="Netscape")?"table-row":"block":"none";

     // close other top menus
     for (i=1; document.getElementById("sub_" + i) && val.indexOf('_')== -1; i++) {
       if (i != val) {
          document.getElementById("sub_" + i).style.display = "none";
       }
     }

    // set main frame to url, if provided
    if (jsMenu.arguments.length > 1) {
      parent.middle_ruedi.location.href = url;
    }
}

Menu

Concept

Advantages

Code

HTML

Stylesheet

Javascript