Hi

I have built the following code that creates a simple collapsable menu, with a link (onmouseOver) but the problem i have is I would like this to be within a table so that when you place your mouse over the top link it displays the extra (hidden) links with new table rows.

<html>
<head>
<title>Navagation Link (onMouseover)</title>
<style type="text/css">
#menu {width: 140px;background: white;}
#menu div {display: none;}
#menu div a ,img {text-decoration: none;}
#menu div a:hover {text-transform: uppercase;}
</style>
<script type="text/javascript" language="javascript">
// Navagation with Link
function show(which) {
var m, els, el, i = 0;
if (document.getElementById) {
m = document.getElementById('menu');
els = m.getElementsByTagName('div');
while (el = els.item(i)) {
if (which == i)
el.style.display = (el.style.display != 'block') ? 'block' : 'none';
else el.style.display = "none";
i++;
}
}
}
onload = function() {
var Q = location.search.substring(1);
if (Q) {
var menu = Number(Q.split('=')[1]);
show(menu);
}
}
</script>
</head>
<body>
<div id="menu">
<a href="http://www.yahoo.com" onmouseover="show(0);">Home</a>
<div>
<a href="next_page.htm?which=0">About Us</a><br>
<a href="next_page.htm?which=0">Vacancies</a><br>
<a href="next_page.htm?which=0">Contact Us</a>
</div>
<BR>
<a href="http://www.yahoo.com" onmouseover="show(1);">Home</a>
<div>
<a href="next_page.htm?which=1">About Us</a><br>
<a href="next_page.htm?which=1">Vacancies</a><br>
<a href="next_page.htm?which=1">Contact Us</a>
</div>
<BR>
<a href="http://www.yahoo.com" onmouseover="show(2);">Home</a>
<div>
<a href="next_page.htm?which=2">About Us</a><br>
<a href="next_page.htm?which=2">Vacancies</a><br>
<a href="next_page.htm?which=2">Contact Us</a>
</div>
<BR>
<a href="http://www.yahoo.com" onmouseover="show(3);">Home</a>
<div>
<a href="next_page.htm?which=3">About Us</a><br>
<a href="next_page.htm?which=3">Vacancies</a><br>
<a href="next_page.htm?which=3">Contact Us</a>
</div>
<BR>
<a href="http://www.yahoo.com" onmouseover="show(4);">Home</a>
<div>
<a href="next_page.htm?which=4">About Us</a><br>
<a href="next_page.htm?which=4">Vacancies</a><br>
<a href="next_page.htm?which=4">Contact Us</a>
</div>
<BR>
</div>
</body>
</html>

So to recap. I would like the whole thing in a table (5 rows - 1 col) 140px wide. with the head link in each row. When the mouse is placed over one of the head links the extra rows automatically appear below. Maybe with a different background color to highlight that these are sub menus.

Thanks for any help in advance!

Allan