NEED URGENT HELP

[Halting]

Good Evening,

I urgently need help. Anybody who can help me on the following problem will receive rep and possibly some Habbo Furniture.

This is going to take a bit to explain, but here goes.

First of all, here is my HTML:

<div id="layer1" style="position: absolute; z-index: 1;">
<table cellpadding="0" cellspacing="0" width="208">
  <tr>
    <td style="padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; filter:alpha(opacity=10);opacity:.10; border-right: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #000000; border-top: 1px solid #000000;" bgcolor="#FFFFFF"><script src="menu.js"></script>
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub1')">      <table height="18" cellspacing="0" cellpadding="0" width="195" border="0">
        <tbody>
          <tr>
            <td background="http://www.habbocentre.com/navigation/1blue.gif"><img src="http://www.habbocentre.com/navigation/1blue.gif" border="0" /></td>
            <td style="padding-top: 3px;" width="152" background="http://www.habbocentre.com/navigation/2blue.gif">HabboCentre</td>
            <td style="padding-top: 3px;" width="38" background="http://www.habbocentre.com/navigation/2blue.gif"><img id="Navi41" height="12" src="http://www.habbocentre.com/navigation/offoverblue.gif" width="43" border="0" name="Navi41" /></a></td>
            <td background="http://www.habbocentre.com/navigation/3blue.gif"><img src="http://www.habbocentre.com/navigation/3blue.gif" border="0" /></td>
          </tr>
        </tbody>
      </table>
</div><span class="submenu" id="sub1">
<a style="text-decoration: none" href="http://www.habbocentre.com/tester.php?skin=blue">
 - Tester</a><br>
</span>
</div></td>
  </tr>
</table>
</div>
<div id="layer2" style="position: relative; z-index: 2;">
<table cellpadding="0" cellspacing="0" width="208">
  <tr>
    <td style="padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; border-right: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #000000; border-top: 1px solid #000000;"><script src="menu.js"></script>
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub1')">      <table height="18" cellspacing="0" cellpadding="0" width="195" border="0">
        <tbody>
          <tr>
            <td background="http://www.habbocentre.com/navigation/1blue.gif"><img src="http://www.habbocentre.com/navigation/1blue.gif" border="0" /></td>
            <td style="padding-top: 3px;" width="152" background="http://www.habbocentre.com/navigation/2blue.gif">HabboCentre</td>
            <td style="padding-top: 3px;" width="38" background="http://www.habbocentre.com/navigation/2blue.gif"><img id="Navi41" height="12" src="http://www.habbocentre.com/navigation/offoverblue.gif" width="43" border="0" name="Navi41" /></a></td>
            <td background="http://www.habbocentre.com/navigation/3blue.gif"><img src="http://www.habbocentre.com/navigation/3blue.gif" border="0" /></td>
          </tr>
        </tbody>
      </table>
</div><span class="submenu" id="sub1">
<a style="text-decoration: none" href="http://www.habbocentre.com/tester.php?skin=blue">
 - Tester</a><br>
</span>
</div></td>
  </tr>
</table>
</div>

Now let me explain.
Basically, I have two layers in both the same position, and both displaying the same data.

This code is my navigation for my website. I am using a javascript on navigation so when you click a link, for instance:-

Link 1

It will open a category of other links:-

Link 1
Cat 1
Cat 2
Cat 3

NOW, MY PROBLEM...
When you click Link 1 only one of my two layers responds. How can I make both layers respond.

In otherwords:-

LAYER 1 (on click)
Link 1
Cat 1
Cat 2
Cat 3

LAYER 2 (on click)
Link 1

Layer 2 is not responding to the action - only one layer is receiving the click.

Is there a code I could put onto my first layer which will tell the second div to also respond to it, or is the are any solution?

Please Help,
The Almighty One