Hover-Menü mit "Aufklappen"

Hallo alle zusammen,

ich würde mich über ein paar Tipps zu meinem "Menü-Vorhaben" freuen:

Ich möchte ein mehr-Ebenen Menü aufbauen, indem zunächst die Einträge der ersten Ebene angezeigt werden und die Ebenen darunter bei den jeweiligen Punkten als Hover angezeigt werden. Das klappt (dank <ul> Menu mit expAll = 1) auch schon ganz gut.

Nun möchte ich aber, dass sobald man auf einen Punkt in der ersten Ebene klickt, das Untermenü auch "real" und nicht mehr nur als Hoover angezeigt wird.

Was ich erreichen möchte ist, Besucher die gerne schnell per Hover-Menüs navigieren können dies tun. Alle Anderen können klassisch durch anklicken das Überpunktes das Untermenü aufklappen.

Hat jemand vielleicht irgendwelche Tipps dazu? Vielleicht sogar ein Beispiel im Netz?

Hier meine Konfiguration bis jetzt:

marks.MENU_LINKS = HMENU
	marks.MENU_LINKS.special = directory
	marks.MENU_LINKS.special.value = 1
	
	marks.MENU_LINKS{	
	
	
		stdWrap.required=1
		stdWrap.wrap=|
		entryLevel = 0
		
		1 = TMENU
		1 {
			expAll = 1
			collapse = 1
			wrap = <ul>|</ul>
			noBlur = 1
			NO = 1
			NO.wrapItemAndSub = <li>|</li>
			ACT = 1
			ACT.linkWrap = <h2>|</h2>
			ACT.wrapItemAndSub = <li>|</li>
			ACTIFSUB = 1
			ACTIFSUB.linkWrap = |
			ACTIFSUB.wrapItemAndSub = <li>|</li>
			
		}
		
		2 = TMENU
		2 {
			expAll = 1
			collapse = 1
			wrap = <ul>|</ul>
			noBlur = 1
			NO = 1
			NO.wrapItemAndSub = <li>|</li>
			ACT = 1
			ACT.linkWrap = <h2>|</h2>
			ACT.wrapItemAndSub = <li>|</li>
			ACTIFSUB = 1
			ACTIFSUB.linkWrap = <h2>|</h2>
			ACTIFSUB.wrapItemAndSub = <li>|</li>
			
		}
		
		3 = TMENU
		3 {
			expAll = 1
			collapse = 1
			wrap = <ul>|</ul>
			noBlur = 1
			NO = 1
			NO.wrapItemAndSub = <li>|</li>
			ACT = 1
			ACT.linkWrap = <h2>|</h2>
			ACT.wrapItemAndSub = <li>|</li>
			ACTIFSUB = 1
			ACTIFSUB.linkWrap = <h2>|</h2>
			ACTIFSUB.wrapItemAndSub = <li>|</li>
			
		}
			
	4 < .3

	}

und das Stylesheet:

#menu {
width: 15em;
float: left;
clear: left;
margin: 1em 0em 0em 0em;
background: #EBECED;
}

#menu ul {
list-style: none;
margin: 0.5em 0 0.5em 0;
padding: 0;
}

#menu ul ul {
list-style: none;
margin: 0.7em 0 0.7em 0.7em;
padding: 0;
}

#menu ul ul ul {
list-style: none;
margin: 0.7em 0 0.7em 0.7em;
padding: 0;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2, .thispage {
color: #fff;
background: #C61B36;
text-transform: uppercase;
}


#menu h2, .thispage {
color: #fff;
background: #C61B36;
text-transform: uppercase;
}

#menu h2 a, .thispage {
border-width: 0px;
padding: 2px 3px;
color: #fff;
background-image: none;
}

#menu a {
color: #000;
text-decoration: none;
padding: 2px 2px 2px 24px;
background-image: url(../pics/button_down3.gif);
}

#menu a:hover {
color: #a00;
background: #fff;
background-image: url(../pics/button_over2.gif);
}

#menu h2 a:hover {
background-image: none;
}


#menu li {
position: relative;
margin: 0 0 3px 0;
}

#menu #hide {
display: none;
color: #FF00FF;
}


#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}


div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}