dynamisches menü

[Benedikt]

Hi,

ich bastel zur Zeit an einem Menü für meine Seite im Stil von Office 2007.

<div class="menu">
  <div onMouseOver="menuAction('1')">Datei</div>
  <div onMouseOver="menuAction('2')">Bearbeiten</div>
  <div onMouseOver="menuAction('3')">Suchen</div>
</div>
<div class="items">
  <div class="item" id="item_1">
    <div>Neu</div>
    <div>Öfnnen</div>
    <div>Schließen</div>
  </div>
  <div class="item" id="item_2">
    <div>Kopieren</div>
    <div>Ausschneiden</div>
    <div>Einfügen</div>
  </div>
  <div class="item" id="item_3">
    <div>nach Dateien</div>
    <div>nach Ordnern</div>
  </div>
</div>

Das ist mein HTML Code. Im 1. layer stehen alle verfügbaren Menüeinträge. In "items" stehen der Reihe nach für jeden Menüeintrag Untermenüs zur Verfügung.
Mit folgendem Javascript Code blende ich die Layer ein bzw. aus.

function menuAction(id) {
  var i = 1;
  while (document.getElementById("item_"+i) != null) {
    hideItem(document.getElementById("item_"+i++));
  }
  showItem(document.getElementById("item_"+id));
}
function showItem(obj) {
  obj.style.visibility="visible";
  obj.style.position="relative";
}
function hideItem(obj) {
  obj.style.position="absolute";
  obj.style.visibility="hidden";
}

Es blendet erst alle Layer aus und schiebt sie aus dem Grundgerüst und blendet den einen gebrauchten wieder ein. Dies funktioniert im FF auch wunderbar aber der Internet Explorer 7 spielt da nicht mit.

Ich habe es dann danmit probiert. Das funktioniert auch in beiden allerdings ist die Geschwindigkeit im Internet Explorer sehr langsam.

function showItem(obj) {
  obj.style.display="block";
}
function hideItem(obj) {
  obj.style.display="none";
}

aktueller Stand des Testmenüs: http://www.apptype.de/test/index3.htm

Wie kann man das statt dessen realisieren, oder warum ist der Internet Explorer so langsam?