Horizontales Menü mit vertikalem Submenü

Ich will ein horizontales Menü mit vertikalem Submenü erstellen. In html vorgebaut sieht es so aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>New Document</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link href="navigation.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mainnav" class="mainnav">
<ul class="mainmenue">
<li><a href="#Beispiel">Home</a></li>
<li>Eins</li>
<li>Zwei
<ul class="mainmenue">
<li><a href="#Beispiel">Zwei Eins</a></li>
<li>Zwei Zwei</li>
</ul>
</li>
<li>Drei
<ul class="mainmenue">
<li>Drei Eins</li>
<li>Drei Zwei</li>
</ul>
</li>
<li>Vier</li>
<li>F&uuml;nf</li>
<li>Sechs</li>
</ul> <div></div>
</div>
</body>
</html>

CSS dazu:
* {
margin:0;
padding:0;
}

body {
text-align: center;
width: 718px;
padding: 0;
margin: 0;
background-color: #cccccc;
margin: 5px auto;
font-family: Arial, sans-serif;
}

div#mainnav div {
clear: left;
}

#mainnav {
width: 718px;
background-color: #9999cc;
position: relative;
}

.mainnav {
clear: left;
background-color: #9999cc;
line-height: 30px;
font-size: 16px;
color: #000000;
text-align: center;
width: 718px;
}

ul.mainmenue {
list-style-type: none;
margin: 0;
padding: 0;
}

ul.mainmenue li {
display: inline;
background-color: #9999cc;
float: left;
position: relative;
width: 100px;
padding: 1px;
font-weight: bold;
}

ul.mainmenue a {
color: #000000;
background-color: transparent;
text-decoration: none;
display: block;
}

ul.mainmenue a:hover, ul.mainmenue a:focus {
background-color: #990000;
color: #000000;
}

ul.mainmenue li ul {
list-style-type: none;
background-color: #9999cc;
color: #000000;
line-height: 30px;
font-size: 12px;
position: absolute;
margin: 0;
padding: 0;
margin-top: 12px;
}

ul.mainmenue li ul li {
float: left;
display: block;
}

ul.mainmenue li ul a:hover, ul.mainmenue li ul a:focus {
background-color: #990000;
color: #000000;
}

/* Erweiterung zur dynamischen Ein-/Ausblendung */
ul.mainmenue li>ul {
display: none; top: 1.6em;
}
ul.mainmenue li:hover>ul, ul.mainmenue li>a#aktuell+ul {
display: block;
}

/* Workaround fuer den IE 7 */
*:first-child+html ul.mainmenue ul {
background-color:silver; padding-bottom:0.4em;
}

Soweit alles ok.

Jetzt wollte ich es in Typo3 einbauen und da hakt's.

So sieht meine Setup-Datei jetzt aus:

MAINMENUE = HMENU
MAINMENUE {
special = directory
special.value = 3
1 = TMENU
1 {
wrap = <ul class="mainmenue">|</ul>
noBlur = 1
expAll = 1
entryLevel = 1
NO = 1
NO.linkWrap = <li class="mainmenue">|</li>
}

2 = TMENU
2 {
wrap = <ul li ul class="mainmenue ul li ul">|</ul li ul>
noBlur = 1
NO = 1
NO.linkWrap = <ul li ul li class="mainmenue ul li ul li">|</ul li ul li>
}
}

Und das CSS dazu (auch leicht variiert von dem CSS ohne Typo3):

@media all
{
.mainmenue {
list-style-type: none;
overflow: hidden;
display: inline;
line-height: 30px;
width: 100%;
}

.mainmenue ul {
margin: 0;
padding: 0;
}

.mainmenue li {
position: relative;
width: 100px;
margin: 0;
padding: 0 10px 0 10px;
}

.mainmenue a {
color: #000000;
background-color: transparent;
text-decoration: none;
width: 100px;
margin: 0;
padding: 0;
}

.mainmenue a:hover, .mainmenue a:focus {
background-color: #990000;
color: #000000;
width: 100px;
text-decoration: none;
margin: 0;
padding: 0;
}

/* 2. Ebene Navigation */

.mainmenue ul li ul {
list-style-type: none;
background-color: #9999cc;
color: #000000;
line-height: 30px;
font-size: 8px;
position: absolute;
margin: 0;
padding: 0;
margin-top: 12px;
display: block;
}

.mainmenue ul li ul li {
float: left;
display: block;
font-size: 8px;
font-weight: normal;
}

.mainmenue ul li ul li a:hover, .mainmenue ul li ul li a:focus {
background-color: #990000;
color: #000000;
}

/* Erweiterung zur dynamischen Ein-/Ausblendung */
.mainmenue ul li>ul {
display: none; top: 1.6em;
}
.mainmenue ul li:hover>ul, .mainmenue ul li>a#aktuell+ul {
display: block;
}

/* Workaround fuer den IE 7 */
*:first-child+html .mainmenue ul ul {
background-color:silver; padding-bottom:0.4em;
}

Ausschnitt aus dem Template:

<div id="mainnav">
<div class="mainmenue">###MAINMENUE###</div>
</div>

=> Ich krieg es nicht hin, dass die Punkte der 2. Ebene unterhalb der 1. Ebene angezeigt werden
=> Außerdem wird nur der Text mit dem hover hinterlegt, aber nicht die Fläche von width=100px wie ursprünglich angedacht...

Mach ich was grundlegend falsch?