menyproblem

Enkelt exempel:

<style>
.submenues{
  display: none;
}

#menu{
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu li {
  display: inline;
}

.open{
  background: #eee;
}

.closed{
  background: #fff;
}
</style>

<script type="text/javascript">

function toggle(n){
  if (!document.getElementById){ return true }

  var i   = 1,
      elm = null;

  while (true){
    if (elm = document.getElementById("submenu" + i)){
      var p = document.getElementById("menu" + i);

      if (i == n){
	p.className = p.className == "open" ? "closed" : "open";	
	elm.style.display = elm.style.display == "block" ? "none" : "block";
      } else {
	p.className = "closed";
	elm.style.display = "none";
      }
    } else {
      return false;
    }

    ++i;
  }
}

</script>

<ul id="menu">
  <li id="menu1"><a href="meny1.html" onclick="return toggle(1)">Meny 1</a></li>
  <li id="menu2"><a href="meny2.html" onclick="return toggle(2)">Meny 2</a></li>
</ul>
<div id="submenu1" class="submenues"><b>Menyalternativ 1:1 Menyalternativ 1:2</b></div>
<div id="submenu2" class="submenues"><b>Menyalternativ 2:1 Menyalternativ 2:2</b></div>

Skriptet fungerar inte i "alla" webbläsare, men är konstruerat på sådant sätt att man navigeras till den länk som finns i <a>-taggen om webbläsaren inte stödjer document.getElementById.

Märk att elementen är döpta efter ett visst mönster.

Mycken tack.
Det är otroligt vilken kunskap som finns att hämta.
Jag har lyckats modifiera det till att se ut som jag önskat.
Vet du eller någon vilka webbläsare som har problem med koden?

En kompatibilitetslista återfinns här.

Glöm inte att använda funktionen acceptera som slutgiltigt svar. :)