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