Here's the two main components - if these can be made to work together then I'm probably sorted.
Menu:
<HEAD>
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Arun kumar (n_arunk@hotmail.com) -->
<link href="CascadeMenu.css" rel="stylesheet">
<script language="javascript" src="CascadeMenu.js">
</script>
</HEAD>
<BODY OnLoad="InitMenu()" Onclick="HideMenu(menuBar)" ID="Bdy" bgColor=aliceblue>
<font color="#800080"><b>Sample Menu</b></font></p>
<DIV Id="menuBar" class="menuBar" >
<DIV Id="Bar1" class="Bar" menu="menu1">Main menu</DIV>
</DIV>
<!--MenuItem Definition -->
<div Id="menu1" class="menu" >
<div Id="menuItem1_1" class="menuItem" menu="menu2">Clock/Timer</div>
<div Id="menuItem1_2" class="menuItem">Time change</div>
<div Id="menuItem1_3" class="menuItem" menu="menu3">Time zone</div>
<div Id="menuItem1_4" class="menuItem" menu="menu4">24 Hour clock AM/PM</div>
<div Id="menuItem1_5" class="menuItem" menu="menu5">Colour change</div>
</div>
<div Id="menu2" class="menu">
<div Id="menuItem2_1" class="menuItem">Clock</div>
<div Id="menuItem2_2" class="menuItem">Timer</div>
</div>
<div Id="menu3" class="menu">
<div Id="menuItem3_1" class="menuItem">GMT -12</div>
<div Id="menuItem3_2" class="menuItem">GMT -11(Samoa)</div>
<div Id="menuItem3_3" class="menuItem">GMT - 10(Hawaii)</div>
<div Id="menuItem3_4" class="menuItem" >GMT - 9(Alaska)</div>
<div Id="menuItem3_5" class="menuItem">GMT - 8(US West coast)</div>
<div Id="menuItem3_6" class="menuItem">GMT - 7(US Midwest)</div>
<div Id="menuItem3_7" class="menuItem">GMT - 6(US Central)</div>
<div Id="menuItem3_8" class="menuItem" >GMT - 5(US East coast)</div>
<div Id="menuItem3_9" class="menuItem">GMT - 4(Canada East coast)</div>
<div Id="menuItem3_10" class="menuItem">GMT - 3(Brazil)</div>
<div Id="menuItem3_11" class="menuItem">GMT - 2</div>
<div Id="menuItem3_12" class="menuItem" >GMT - 1(Iceland)</div>
<div Id="menuItem3_13" class="menuItem">GMT(London)</div>
<div Id="menuItem3_14" class="menuItem">GMT + 1(Western continental Europe)</div>
<div Id="menuItem3_15" class="menuItem">GMT + 2(Greece, Egypt, Israel)</div>
<div Id="menuItem3_16" class="menuItem" >GMT + 3(Middle East, Western Russia)</div>
<div Id="menuItem3_17" class="menuItem">GMT + 4(Azerbaijan)</div>
<div Id="menuItem3_18" class="menuItem">GMT + 4.5(Afghanistan)</div>
<div Id="menuItem3_19" class="menuItem">GMT + 5(Pakistan)</div>
<div Id="menuItem3_20" class="menuItem" >GMT + 5.5(India)</div>
<div Id="menuItem3_21" class="menuItem">GMT + 6(Sri Lanka, Bangledesh)</div>
<div Id="menuItem3_22" class="menuItem">GMT + 7(South East Asia)</div>
<div Id="menuItem3_23" class="menuItem">GMT + 8(China, West Coast Austrailia)</div>
<div Id="menuItem3_24" class="menuItem" >GMT + 9(South Korea, Japan)</div>
<div Id="menuItem3_25" class="menuItem">GMT + 9.5(Central Austrailia)</div>
<div Id="menuItem3_26" class="menuItem">GMT + 10(East coast Austrailia, Eastern Russia)</div>
<div Id="menuItem3_27" class="menuItem">GMT + 11(Soloman Islands)</div>
<div Id="menuItem3_28" class="menuItem" >GMT + 12(New Zealand)</div>
</div>
<div Id="menu4" class="menu">
<div Id="menuItem4_1" class="menuItem">24 Hour clock</div>
<div Id="menuItem4_2" class="menuItem">AM/PM</div>
</div>
<div id="menu5" class="menu">
<div Id="menuItem5_1" class="menuItem">Black</div>
<div Id="menuItem5_2" class="menuItem">Red</div>
<div Id="menuItem5_3" class="menuItem">Blue</div>
<div Id="menuItem5_4" class="menuItem">Green</div>
<div Id="menuItem5_5" class="menuItem">Yellow</div>
</div>
Clock:
HEAD>
<script language="javascript" src="/path/to/validator.js"></script>
<FORM id = "theForm" onSubmit = "return validateForm(theForm)">
<!-- Begin
function clock() {
var t = new Date();
var h = t.getHours();
var m = t.getMinutes();
var s = t.getSeconds();
var units = new String(" ");
var hours = t.getHours();
var min = t.getMinutes();
var sec = t.getSeconds();
document.clock.hours.value = units.substring(0, hours);
document.clock.minutes.value = units.substring(0, min);
document.clock.seconds.value = units.substring(0, sec);
var status = "AM";
if (hours > 11)
status = "PM";
if (hours < 11)
hours -= 12;
if (min < 10)
min = "0" + min;
if (sec < 10)
sec = "0" + sec;
document.clock.h.value = hours;
document.clock.m.value = min;
document.clock.s.value = sec;
document.clock.time.value = hours + ":" + min + ":" + sec + " " + status;
window.setTimeout("clock()", 900);
}
</HEAD>
<BODY onLoad="clock();">
<form name="clock">
<table>
<tr>
<td>
Hours:
</td>
<td>
<input type="text" name="h" size="10" style="border: 0">
</td>
</tr>
<tr>
<td colspan=2>
<input type=text name="hours" size="10" style="color: navy">
</td>
</tr>
<tr>
<td>
Minutes:
</td>
<td>
<input type="text" name="m" size="10" style="border: 0">
</td>
</tr>
<tr>
<td colspan=2>
<input type=text name="minutes" size="60" style="color: navy">
</td>
</tr>
<tr>
<td>
Seconds:
</td>
<td>
<input type="text" name="s" size="10" style="border: 0">
</td>
</tr>
<tr>
<td colspan=2>
<input type=text name="seconds" size="69" style="color: navy">
</td>
</tr>
<tr>
<td>
Time: <input type=text name="time" size="20" style="border: 0">
</td>
</tr>
</table>
</form>
All help is appreciated