Horizontales Menu mit < li > aufbauen

Hallo,

ich versuche jetzt seit längerer Zeit ein Menu mit Typo3 aufzubauen, das wie folgt aussehen soll: http://zmw.rs-dahlhoff.de - das ist die mit ein bißchen PHP-Unterstützung gebaute Variante.

Ich versuche das Menu über folgendes Typoscript aufzubauen:

# Menu cObject
temp.menu = HMENU

# First level menu-object, textual
temp.menu.1 = TMENU
temp.menu.1 {

    # Normal state properties
    NO.allWrap = <li> | </li>

    # Enable active state and set properties:
    ACT = 1
    ACT.allWrap = <li class="navigation_act"> | </li>
}


# Second level menu-object, textual
temp.menu.2 = TMENU
temp.menu.2 {

    # Normal state properties
    NO.allWrap = <li> | </li>

    # Enable active state and set properties:
    ACT = 1
    ACT.allWrap = <li class="navigation-act"> | </li>
}

# Main TEMPLATE cObject for the BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {

    # Feeding the content from the Auto-parser to the TEMPLATE cObject:
    template =< plugin.tx_automaketemplate_pi1

    # Select only the content between the <body>-tags
    workOnSubpart = DOCUMENT_BODY

    # Substitute the ###menu### subpart with dynamic menu:
    subparts.menu < temp.menu

    # Substitute the ###content### subpart with dynamic content:
    subparts.content < styles.content.get
}

Der HTML-Code, der hierfür relevant ist, liegt in einem Template-File:

<ul id="menu">
<li><a href="http://zmws/index.php">Home</a></li>
<li class="navigation_act"><a href="http://zmws/bistro.php">Bistro</a>
<ul style="left: 15px;">
<li><a href="http://zmws/bistro_fs.php">Frühstück</a></li>
<li><a href="http://zmws/bistro_me.php">Mittagstisch</a></li>
<li><a href="http://zmws/bistro_ge.php">Getränke</a></li>
</ul>
</li>
<li><a href="http://zmws/laden.php">Laden</a></li>
<li><a href="http://zmws/dienstleistung.php">Dienstleistungen</a></li>
<li><a href="http://zmws/wegbeschreibung.php">Ihr Weg zu uns</a></li>
<li><a href="http://zmws/kontakt.php">Kontakt</a></li>
<li><a href="http://zmws/presse.php">Presse</a></li>
</ul>

Falls es jemand interessiert, hier noch das CSS, das die Liste so formatiert, das das rauskommt, was ich haben will (siehe oben angegebene URL):

/**** Hauptmenu ******************************************/
#menu {
	display: block; 
	position: absolute; 
	left: 80px; 
	top: 5px;
	white-space: nowrap;
	margin: 1px;
	padding: 1px;
	list-style: none;
	height: auto;
}

#menu li {
	display: inline; 
	margin: 1px; 
	padding: 3px;
}

#menu li a {
	background-color: #33BB33;
	padding: 1px 3px 3px 3px;
	color: #FFFFFF;
	text-decoration: none;
	font-weight: normal;
	width: 100%;
}

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

#menu .navigation_act a {
	background-color: #FFFFFF;
	padding: 1px 3px 3px 3px;
	color: #00AA00;
	border: 1px #33BB33 solid;
	text-decoration: none;
	font-weight: normal;
}

#menu .navigation_act a:hover, a:active {
	text-decoration: underline;
}

/**** Untermenu ******************************************/
#menu .navigation_act ul {
	position: absolute;
	top: 25px;
}

Wie ihr sehen könnt, wird das eine Seite für eine Behindertenwerkstatt - und da ist es mir sehr wichtig, eine barrierefreie Seite zu machen - deshalb erscheint mir die Version mit der Liste am sinnvollsten, weil man dann auch noch ohne Styles und Farben ein sinnvoll zu bedienendes Menu hat.

Ich hoffe, das mir jemand bei meinem Problem weiterhelfen kann, und stelle gerne noch mehr Infos zur Verfügung, wenn die benötigt werden.

Vielen Dank im vorraus,
Manuel