Vetikales Aufklappmenü klappt zu früh wieder zu

[dizzy]

Hallo Ihr Lieben,

auf der linken Seite meiner Website habe ich ein vertikales Aufklappmenü angelegt. Klicke ich auf einen Menüpunkt, welcher Unterpunkte enthält, dann klappt das Menü (wie gewollt) auf. Wenn ich dann jedoch auf einen der Unterpunkte klicke, klappt das Menü gleich wieder zu.
Frage: Wie kann ich es erreichen, dass das Menü erst dann wieder zuklappt, wenn ich auf einen der Hauptmenüpunkte klicke?

Hier der html-code:

<dl id="menu">  
		<dt onclick="javascript:show('smenu1');">AUFNAHME</dt>  
<dd id="smenu1">  
				<ul>  
				 <li><a href="../Anmeldung.html">Anmeldung</a></li>  
				 <li><a href="../Unterricht.html">Unterricht</a></li>  
				 <li><a href="../Gebuehren.html">Gebühren</a></li>  
                 <li><a href="../Schulordnung.html">Schulordnung</a></li>  
                 <li><a href="../Geschaeft.html">Geschäftsordnung</a></li>  
	 </ul>  
			</dd>	  
		<dt onclick="javascript:show();"><a href="../Abschluesse.html">ABSCHLÜSSE</a></dt>  
      <dt onclick="javascript:show();"><a href="../Stundenplaene.html">STUNDENPLÄNE</a></dt>  
      <dt onclick="javascript:show();"><a href="../Oberstufe.html">OBERSTUFE</a></dt>  
      <dt onclick="javascript:show('smenu5');">TERMINE</dt>  
			<dd id="smenu5">  
				<ul>  
				 	<li><a href="#">Änderungen</a></li>  
					<li><a href="../Terminplan.html">Terminplan</a></li>  
			 </ul>  
			</dd>  
        <dt onclick="javascript:show();"><a href="../Aktivit.html">AKTIVITÄTEN</a></dt>  
</dl>

Hier der zugehörige css-code:

@charset "UTF-8";  
/* CSS Document */  
  
  
body {  
	margin: 0;  
	padding: 0;  
	font-family: Verdana, Arial, Helvetica, sans-serif;  
	font-size: 10pt;  
	font-style: normal;  
	font-weight: normal;  
	text-decoration: none;  
}  
dl, dt, ul, li, dd  {  
margin: 0;  
padding: 0;  
list-style-type: none;  
}  
#menu {  
	position: relative; /* Menu position that can be changed at will */  
	top: 0;  
	left: 0;  
}  
#menu {  
	width: 10em;  
}  
#menu dt {  
	cursor: pointer;  
	margin: 2px 0;  
	;  
	height: 24px;  
	line-height: 24px;  
	text-align: left;  
	font-weight: normal;  
	color: #000000;  
}  
#menu dd {  
	margin-left: 15px;  
	line-height: 24px;  
}  
#menu li {  
	text-align: left;  
}  
#menu li a {  
	color: #333333;  
	text-decoration: none;  
	display: block;  
	height: 100%;  
}  
#menu  dt  a    {  
	color: #000000;  
	text-decoration: none;  
	display: block;  
	border: 0 none;  
	height: 100%;  
}  
#menu  li  a:hover    {  
}  
#menu dt a:hover {  
}

Und schließlich und endlich der Javascript-Code:

<script type="text/javascript">  
<!--  
window.onload=show;  
function show(id) {  
var d = document.getElementById(id);  
	for (var i = 1; i<=10; i++) {  
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}  
	}  
if (d) {d.style.display='block';}  
}  
//-->  
</script>

Lieber Gruß
Dizzy

[Felix Riesterer]

Liebe(r) dizzy,

Gegenfrage: Warum machst Du das mit JavaScript, wo doch eine so wichtige Geschichte wie eine Navi unter allen Umständen (also auch wenn kein JavaScript verfügbar ist) unbedingt nutzbar sein sollte? Warum machst Du es nicht <http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=rein mit CSS>?

Liebe Grüße,

Felix Riesterer.

[Die Dizzy]

Lieber Felix,
ich mache das eigentlich nur aus Verzweiflung mit Javascript. Ich habe mir deinen Link durchgelesen, danke!
Dort gibt es ein vertikales Menü mit mehreren Navigationsebenen. Allerdings ist dies im Beispiel aufgeklappt bzw. die zweite Navigationsebene ist einfach eingerückt.
Deshalb hier meine Frage: Gibt es eine Möglichkeit, ein vertikales Menü so anzulegen, dass es ohne Javascript funktioniert und erst dann aufklappt, wenn man es anklickt? Ich finde im Netz sehr viel zu horizontalen Menüs, bin aber zu sehr Neuling in dem ganzen Bereich, dass ich das schwupp die wupp in ein vertikales umwandeln könnte.
Würde mich riesig über Tipps freuen!

Liebe Grüße
Die Dizzy