komplizierteres Tab-Menu in Css

Hallo,
ich würde gerne ein schönes Tab-Menu bauen analog zu dem Beispiel hier:
soll ungefär so aussehen:Dynamic Drive DHTML Scripts -DD Tab Menu (5 styles)

<style>
html, body {
margin: 0px;
padding: 0px;
}

body {
text-align: center;
}

#Wrapper {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: left;
width: 765px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}

#Container {
background-color: #D0D2C1;
color: #333;
clear: both;
margin: 0px;
padding-top: 2.2em;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
width: 765px;
float: left;
border: 1px solid #C0C0C0;
display: block;
}

#Content {
background-color: #FFFFFF;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #C0C0C0;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
margin: 0px;
width: auto;
height: auto;
}

#Navigation {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
position: relative;
height: 50px;
display: block;
width: auto;
}

ul#primary {
margin: 0;
padding: 0;
position: absolute;
bottom: -1px;
width: 658px;
}

ul#primary li {
display: inline;
list-style: none;
}

ul#primary a,ul#primary a.active {
width: 10em;
display: block;
float: left;
text-align: center;
font-family: tahoma, verdana, sans-serif;
font-size: 11px;
text-decoration: none;
color: #333;
letter-spacing: .1em;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 0;
margin-left: 0;
padding-top: 4px;
padding-right: 0;
padding-bottom: 4px;
padding-left: 0;
}

ul#primary a.active,ul#primary a.active:hover {
border-top: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-bottom: none;
border-left: 1px solid #c0c0c0;
background: #D0D2C1;
color: #333;
margin-top: 0;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
}

ul#primary a {
background: #e8e9e1;
border-top: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-bottom: none;
border-left: 1px solid #c0c0c0;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
}

ul#primary a:hover {
margin-top: 1;
border-color: #c0c0c0;
background: #F1F1ED;
color: #333;
padding-bottom: 3px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
}
ul#secondary {
position: absolute;
margin: 0;
padding: 0;
bottom: -1.6em;
left: 1px;
width: 100%;
}

ul#secondary li a {
width: auto;
display: block;
float: left;
padding: 0 10px;
margin: 0;
text-align: center;
border-top: none;
border-right: 1px dotted #c0c0c0;
border-bottom: none;
border-left: none;
background: none;
color: #666;
background-color: #D0D2C1;
text-decoration: none;
}

ul#secondary li a:hover {
color: #333;
background-color: #D0D2C1;
border-top: none;
border-right: 1px dotted #c0c0c0;
border-bottom: none;
border-left: none;
margin: 0px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
}

ul#secondary li a:active {
color: #000;
background-color: #D0D2C1; }

ul#secondary li:last-child a { border: none; }

</style>
</head>

<body>

<div id="Wrapper">

<div id="Navigation">
      <ul id="primary">
            <li><a href="#">home</a></li>
            <li><a href="#" class="active">services</a>
                  <ul id="secondary">
                        <li><a href="#">web design</a></li>
                        <li><a href="#">flash design</a></li>
                        <li><a href="#">content management</a></li>
                  </ul>
            </li>
            <li><a href="#">about us</a></li>
            <li><a href="#">contact us</a></li>
      </ul>
</div>
<div id="Container">
<div id="Content">
</div>
</div>

</div>

Allerdings soll das Menu eine 2.te Ebene haben die darunter angezeigt wird.
Die habe ich erstmal als 2.te ul/li Liste dargestellt.
Jetzt würde ich gerne das wenn ich mit der Mouse darüber fahre(Rollover), das bereits das Submenu angezeit wird, und auch auf die Tabs geklickt werden kann. Kann ich hier das RO-Element nehmen?
Hat jemand evtl. eine Idee oder schon Erfahrung mit solchen komplizierten Menüs?

Viele liebe Grüße
Sabsine

Hab mal etwas gegoogelt):
Habe folgendes gefunden, was haltet Ihr davon ?
Kann man das gut mit Typo3 umsetzen?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Horizontal expanding menu on a CSS line</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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>
<style type="text/css">
<!--
/* CSS from tutorials of www.alsacreations.com/articles */
body {margin: 10px;
padding: 0;
font: 1em Verdana, sans-serif;}

dt, dl, dd, ul, li {
list-style-type: none;
margin: 0 10px 0 0;
padding: 0;
}

#menu {
position : absolute;
left: 50px;
top: 20px;
}

#menu dl {
float: left;
}
#menu li {
display: inline;
}

#menu a {
text-decoration: none;
color: #000;
background: #fff;
}

#smenu1, #smenu2, #smenu3, #smenu4 {
position: absolute;
left: 0;
font-size: 0.7em;
border-top: 1px solid gray;
width: 400px;
}


.mentions {
position: absolute;
bottom : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
a {text-decoration: none;
color: #222;
}

-->
</style>

</head>

<body>

<div id="menu">
	<dl>

		<dt onmouseover="montre('smenu1');"><a href="#">Menu 1</a></dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Sub Menu 1.1</a></li>
					<li><a href="#">Sub Menu 1.2</a></li>
					<li><a href="#">Sub Menu 1.3</a></li>
				</ul>

			</dd>
	</dl>
	
	<dl>			
		<dt onmouseover="montre('smenu2');"><a href="#">Menu 2</a></dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sub Menu 2.1</a></li>
					<li><a href="#">Sub Menu 2.2</a></li>

				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="montre('smenu3');"><a href="#">Menu 3</a></dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sub Menu 3.1</a></li>

					<li><a href="#">Sub Menu 3.2</a></li>
					<li><a href="#">Sub Menu 3.3</a></li>
					<li><a href="#">Sub Menu 3.4</a></li>
					<li><a href="#">Sub Menu 3.5</a></li>
				</ul>
			</dd>
	</dl>

	
	<dl>	
		<dt onmouseover="montre('smenu4');"><a href="#">Menu 4</a></dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sub Menu 4.1</a></li>
					<li><a href="#">Sub Menu 4.2</a></li>
					<li><a href="#">Sub Menu 4.3</a></li>

				</ul>
			</dd>
	</dl>
	
</div>

</body>
</html>

Lg

Hallo Sabsine,

Jetzt würde ich gerne das wenn ich mit der Mouse darüber fahre(Rollover), das bereits das Submenu angezeit wird, und auch auf die Tabs geklickt werden kann. Kann ich hier das RO-Element nehmen?

Denke Du suchst nach einem Layermenü - just2b hat da einige Hilfen auf seiner Webseite stehen. Schau mal hier:

http://www.just2b.com/mein-typo3/css-ts-menues/horizontales-dropdown-menue-mit-gmenu.html

Dann noch Dein CSS anpassen und es sieht so aus wie in Deinem Beispiel.

Danke für deine Hilfe!
Ich habe jetzt ein Menu gefunden welches ich gerne in TYPO3 einbinden würde.
Hier ist das Menu (das unterste!)in HTML: http://www.cssplay.co.uk/menus/pro_droptab.html

Das arbeitet mit meherern div's.... wäre das hier abbildbar in TYPO3?
Ich kanns mir nur schwer vorstellen.

Wäre echt super wenn ich auf Hilfe zählen könnte.
Lg
Sabsine