Vertikaler Menübaum mit css

Hallo Leute,

Ich bin ganz neu hier und habe direkt ein Problem. Ich versuche einen Menübaum mit 2 Submenüs zu basteln. Das erste Submenü ist kein Problem jedoch bekomm ich das zweite nicht hin.

htmlcode:
<div id="menu">
<dl onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"><a href="index.php">Home</a>
<dt id="smenu1" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"><a href="#">Abteilungen</a></dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Fussball</a>
</ul>
</dd>
</dl>

</div>

<script type="text/javascript">
<!--
window.onload=montre;
function montre(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>

css code:

dl, dt, dd, ul, li , l{
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
width: 10em;
margin: 0; padding: 0.8em;
border: 1px solid black;
background-color: #0C6B1C;
}

#menu dl {
cursor: pointer;
background: #A9BFCB;
height: 40px;
line-height: 25px;
margin: 3px 1;
border: 1px solid white;
text-align: center;
font-weight: bold;
}

#menu dt {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 10em;
background: #0C6B1C;
border: 1px solid gray;
}

#menu dd{
position: absolute;
z-index: 100;
left: 14em;
margin-top: -0.8em;
width: 10em;
background: #0C6B1C;
border: 1px solid gray;
}

#menu ul {
text-align: center;
list-style: none;
margin: 0.4em; padding: 2x;
}
#menu dl a:hover{
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}

#menu dt a:hover{
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}

#menu li {
text-align: center;
list-style: none;
margin: 0.2em; padding: 0;
background-color: #A9BFCB;
line-height: 12px;
}
#menu li a, #menu dl a, #menu dt a, dd a {
display:block;
padding: 0.5em;
text-decoration: none; font-weight: bold;
color: white; background-color: #000000;
}

#menu li a:hover {
text-decoration: underline;
}

#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: white;
}
#mentions a:hover{text-decoration: underline;
}

Wenn ich auf das erste Submenu mit der Maus drüber fahre passiert einfach nichts...

Bin für jede Hilfe Dankbar!!!

Viele Grüße
Christian