Dropdown menu

Haalløj. Hmm det driller for tiden.. :-( Jeg har fundet og lavet en menu hvor den viser to niveauer ned ved tryk på en. Her er det dog den ikke skjuler den første trykkede på hvis man trykker på en anden. Det vil jeg gerne kunne lade sig gøre, da det jo ellers kan blive en frygtelig lang menu.
Det ser således ud:

<script type="text/javascript">
if (!document.getElementById)
    document.getElementById = function() { return null; }

function initializeMenu(menuId, actuatorId) {
    var menu = document.getElementById(menuId);
    var actuator = document.getElementById(actuatorId);

    if (menu == null || actuator == null) return;

   
    actuator.onclick = function() {
        var display = menu.style.display;
        this.parentNode.style.listStyleImage =
            (display == "block") ? "" : "";
        menu.style.listStyleImage = "";
        menu.style.display = (display == "block") ? "none" : "block";

        return false;
    }
}
</script>
<script type="text/javascript">
    <!--
        window.onload = function() {
            initializeMenu("1Menu", "1Actuator");
            initializeMenu("2Menu", "2Actuator");
            initializeMenu("3Menu", "3Actuator");
            }
    //-->
    </script>

<td class="tdmenu1">
      <div id="mainMenu">
      <ul id="menuList">
        <li class="menubar">
          <a href=""
            id="1Actuator"
            class="actuator"
            accesskey="p">1</a>
          <ul id="1Menu" class="menu">
            <li><a href="../menu11.html">menu1.1</a></li>
            <li><a href="../menu12.html">menu1.2</a></li>
            </ul>
        </li>
        <li class="menubar">
          <a href=""
            id="2Actuator"
            class="actuator"
            accesskey="n">2</a>
          <ul id="2Menu" class="menu">
            <li><a href="../1/menu21.htm">menu2.1</a></li>
            <li><a href="../2/menu22.htm">menu2.2</a></li>
            <li><a href="../3/menu23.htm">menu2.3</a></li>
          </ul>
        </li>

Ideer anyone?