Problem mit horizontaler "Button-Navi"

[Janinchen]

So ihr lieben, ich mal wieder ;)

Hab ein Problem mit einer css-Navi. Soll so funktionieren, dass beim Drüberfahren der Links die "Untermenü-Links" darunter erscheinen - horizontal.
Die Links horizontal und die Untermenü-Links dann vertikal darunter - kein Problem, das hab ich bis jetzt hinbekommen.
Nur krieg ich die Untermenü-Links nicht nebeneinander ohne dass irgendwas verschoben wird.
Float bringt auch nix - zumindest nicht so wie ich es einsetzen wollte :(

Die stylesheet-Angaben:

#menu {  
	list-style-type:none;  
	margin: auto;  
	MARGIN-LEFT: 100px;  
	MARGIN-TOP: 17px;  
	padding:0;  
	WIDTH: 1000px;  
	TEXT-ALIGN: center;  
}  
  
#menu li {  
	display:block;  
	float:left;  
	position:relative;  
	z-index:100;  
	margin-right:1px;  
}  
#menu li span {  
	display:block;  
	z-index:100;  
	background:transparent;  
	padding: 5px 10px;  
	WIDTH: auto;  
}  
  
#menu li a, #menu li a:visited {  
	display:block;  
	padding: 0;  
	BORDER: none;  
}  
  
#menu dl {  
	position:absolute;  
	top: 0;  
	left: 0;  
	margin: auto;  
	padding: 0;  
	WIDTH: auto;  
}  
#menu dt {  
	margin:auto;  
	border: none;  
	float:left;  
	TEXT-ALIGN: center;  
}  
  
#menu dd {  
	display:none;  
	margin:auto;  
	padding:0;  
	PADDING-TOP: 30px;  
	PADDING-RIGHT: 15px;  
	TEXT-ALIGN: left;  
}  
  
#menu dd a, #menu dd a:visited {  
	text-decoration:none;  
	display:block;  
	padding: 5px 10px;  
	BORDER: none;  
	BORDER-BOTTOM: 1px solid red;  
	MARGIN-LEFT: 10px;  
	margin-right: 10px;  
	BACKGROUND-COLOR: #000;  
}  
  
#menu li:hover dd, #menu li a:hover dd {display:block;}  
  
#menu li:hover dt a:hover {  
	BACKGROUND-REPEAT: no-repeat;  
	CURSOR: default;  
}  
  
#menu dt a, #menu dt a:visited {  
	display:block;  
	padding: 5px 10px;  
	text-decoration:none;  
	BACKGROUND-REPEAT: no-repeat;  
	CURSOR: default;  
	HEIGHT: 13px;  
}  
  
#menu li dt.service a, #menu li dt.service a:visited {background-image: url(layout/service.gif); }  
#menu li:hover dt.service a:hover { background-image: url(layout/service_on.gif); }  
#menu li span.service {WIDTH: 146px;}  
#menu li dt.service {WIDTH: 146px;}  
  
#menu li dt.ueberuns a, #menu li dt.ueberuns a:visited {background-image: url(layout/ueberuns.gif); }  
#menu li:hover dt.ueberuns a:hover { background-image: url(layout/ueberuns_on.gif); }  
#menu li span.ueberuns {WIDTH: 93px;}  
#menu li dt.ueberuns {WIDTH: 93px;}  

... und hier der html-Code dazu:

<ul id="menu">  
<li><span class="service"> </span>  
  
<dl>  
	<dt class="service"><a href="menu/index.html"> </a></dt>  
	<dd><a href="menu/embed.html" title="Wrapping text around images">Frauen</a></dd>  
	<dd><a href="menu/form.html" title="Styling forms">M&auml;nner</a></dd>  
	<dd><a href="menu/nodots.html" title="Removing active/focus borders">Kinder</a></dd>  
</dl>  
  
</li>  
<li><span class="ueberuns"> </span>  
<dl>  
	<dt class="ueberuns"><a href="../mozilla/index.html"> </a></dt>  
	<dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop&nbsp;down&nbsp;menu</a></dd>  
	<dd><a href="../mozilla/cascade.html" title="A cascading menu">cascading&nbsp;menu</a></dd>  
	<dd><a href="../mozilla/content.html" title="Using content:">content:</a></dd>  
</dl>  
</li>  
  
</ul>