index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title>Menu example</title>
  <meta http-equiv="Content-Type"
        content="text/html; charset=us-ascii">

<script type="text/javascript" src="MyDom2.js"></script>

<script type="text/javascript">
<!--

var theMenu = null;

function Menu_open( menuId )
{
  this.menu[ menuId ].subMenu.setVisibility(1);
  this.menu[ menuId ].state = "on";
  for ( m in this.menu ) {
    if ( m != menuId ) {
      this.menu[ m ].subMenu.setVisibility(0);
      this.menu[ m ].state = "off";
    }
  }
}

function Menu_over( menuId )
{
  this.open( menuId );
}

function Menu_out( menuId )
{
  this.menu[ menuId ].state = "off";
  setTimeout( "theMenu.switchOffs()", 2000 );
}

function Menu_switchOffs() {
  for ( m in this.menu ) {
    if ( this.menu[ m ].state == "off" ) {
      this.menu[ m ].subMenu.setVisibility(0);
    }
  }
}

function Menu_subOver( sMenuId )
{
  this.open( this.sMenu[ sMenuId ].menu );
}

function Menu_subOut( sMenuId )
{
  this.menu[ this.sMenu[ sMenuId ].menu ].state = "off";
  setTimeout( "theMenu.switchOffs()", 1000 );
}

function Menu()
{
  this.mainMenu     = new MyDom( "mainMenu" );
  this.menu_cnt     = 0;
  this.menu         = new Array();
  this.sMenu        = new Array();
  this.over         = Menu_over;
  this.out          = Menu_out;
  this.open         = Menu_open;
  this.switchOffs   = Menu_switchOffs;
  this.subOver      = Menu_subOver;
  this.subOut       = Menu_subOut;

  do {
    menu_pt_no = this.menu_cnt + 1;
    menuId    = "menu" + menu_pt_no;

    amenu_pt = new MyDom( menuId );
    if ( amenu_pt.dom_addr == null ) {
      break;
    }
    this.menu[ menuId ] = amenu_pt;

    amenu_pt.dom_addr.onmouseover = function () { theMenu.over( this.id ) };
    amenu_pt.dom_addr.onmouseout  = function () { theMenu.out( this.id ) };

    sub_menu_pt = new MyDom( menuId + "sub" );
    this.menu[ menuId ].subMenu = sub_menu_pt;
    this.menu[ menuId ].state   = "off";

    this.sMenu[ menuId + "sub" ] = new Object();
    this.sMenu[ menuId + "sub" ].menu = menuId;

    sub_menu_pt.dom_addr.onmouseover = function () { theMenu.subOver( this.id ) };
    sub_menu_pt.dom_addr.onmouseout  = function () { theMenu.subOut( this.id ) };

    this.menu_cnt ++;
  }
  while ( amenu_pt.dom_addr != null );
}

function createMenu() {
  if ( findDOM( "mainMenu", 0 ) == null ) { setTimeout( "createMenu()", 1000 ); return; }
  theMenu = new Menu();
}

//-->
</script>

<style type="text/css">
<!--

#mainMenu {
  position : absolute;
  top      : 20px;
  left     : 20px;
  width    : 500px;
}

div#mainMenu table {
  background : #CCCCCC;
}

div#mainMenu table tr td {
  padding-top    : 2px;
  padding-bottom : 2px;
  padding-left   : 10px;
  padding-right  : 10px;
}

div#mainMenu table tr td a {
  text-decoration : none;
  font-weight     : bold;
  font-family     : Verdana, Arial, sans-serif;
  font-size       : 12px;
}

#menu1 {
  position : relative;
  top      : 0;
  left     : 0;
}

#menu1sub {
  position   : absolute;
  visibility : hidden;
  top        : 20px;
  left       : 0px;
}

#menu2sub {
  position   : absolute;
  visibility : hidden;
  top        : 20px;
  left       : 70px;
}

#menu3sub {
  position   : absolute;
  visibility : hidden;
  top        : 20px;
  left       : 135px;
}

#menu4sub {
  position   : absolute;
  visibility : hidden;
  top        : 20px;
  left       : 200px;
}

#menu5sub {
  position   : absolute;
  visibility : hidden;
  top        : 20px;
  left       : 270px;
}

body {
  color : white;
  background : black;
}

//-->
</style>

</head>

<body onLoad="createMenu()">

<div id="mainMenu">

<table border="0" cellspacing="0" cellpadding="0">
<tr>
  <td><a href="#" id="menu1">menu1</a></td>
  <td><a href="#" id="menu2">menu2</a></td>
  <td><a href="#" id="menu3">menu3</a></td>
  <td><a href="#" id="menu4">menu4</a></td>
  <td><a href="#" id="menu5">menu5</a></td>
</tr>
</table>

  <div id="menu1sub">
  <table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="#">menu1-1</a></td>
  </tr>
  <tr>
    <td><a href="#">menu1-2</a></td>
  </tr>
  <tr>
    <td><a href="#">menu1-3</a></td>
  </tr>
  <tr>
    <td><a href="#">menu1-4</a></td>
  </tr>
  <tr>
    <td><a href="#">menu1-5</a></td>
  </tr>
  </table>
  </div>

  <div id="menu2sub">
  <table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="#">menu2-1</a></td>
  </tr>
  <tr>
    <td><a href="#">menu2-2</a></td>
  </tr>
  <tr>
    <td><a href="#">menu2-3</a></td>
  </tr>
  <tr>
    <td><a href="#">menu2-4</a></td>
  </tr>
  </table>
  </div>

  <div id="menu3sub">
  <table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="#">menu3-1</a></td>
  </tr>
  <tr>
    <td><a href="#">menu3-2</a></td>
  </tr>
  <tr>
    <td><a href="#">menu3-3</a></td>
  </tr>
  <tr>
    <td><a href="#">menu3-4</a></td>
  </tr>
  <tr>
    <td><a href="#">menu3-5</a></td>
  </tr>
  <tr>
    <td><a href="#">menu3-6</a></td>
  </tr>
  <tr>
    <td><a href="#">menu3-7</a></td>
  </tr>
  </table>
  </div>

  <div id="menu4sub">
  <table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="#">menu4-1</a></td>
  </tr>
  <tr>
    <td><a href="#">menu4-2</a></td>
  </tr>
  <tr>
    <td><a href="#">menu4-3</a></td>
  </tr>
  <tr>
    <td><a href="#">menu4-4</a></td>
  </tr>
  <tr>
    <td><a href="#">menu4-5</a></td>
  </tr>
  </table>
  </div>

  <div id="menu5sub">
  <table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="#">menu5-1</a></td>
  </tr>
  <tr>
    <td><a href="#">menu5-2</a></td>
  </tr>
  </table>
  </div>

</div>

  <br>
  <br>

<p>Some text or a form content. Some text or a form content. Some text or a form content.
   Some text or a form content. Some text or a form content. Some text or a form content.
   Some text or a form content. Some text or a form content. Some text or a form content. </p>

<p>Some text or a form content. Some text or a form content. Some text or a form content.
   Some text or a form content. Some text or a form content. Some text or a form content.
   Some text or a form content. Some text or a form content. Some text or a form content. </p>

<p>Some text or a form content. Some text or a form content. Some text or a form content.
   Some text or a form content. Some text or a form content. Some text or a form content.
   Some text or a form content. Some text or a form content. Some text or a form content. </p>

<p>Some text or a form content. Some text or a form content. Some text or a form content.
   Some text or a form content. Some text or a form content. Some text or a form content.
   Some text or a form content. Some text or a form content. Some text or a form content. </p>

<p>Some text or a form content. Some text or a form content. Some text or a form content.
   Some text or a form content. Some text or a form content. Some text or a form content.
   Some text or a form content. Some text or a form content. Some text or a form content. </p>

</body>

</html>