Problema menu a tendina

[filo84]

Ciao a tutti,
non sono per nulla esperto in css ma vorrei realizzare un menu a tendina in css ma nn riesco a visualizzare le sottopagine al passaggio del mouse sulle categorie.
L'effetto che vorrei è: passando col mouse sopra a "Il club" dovrebbe comparire un sottomenu con le voci "Chi siamo", "La struttura", "Dove siamo".

Questo è l'html da manipolare:

<ul class="lavaLampWithImage">
				<li class="page_item current_page_item">Home
				<li class="page_item page-item-47">Il Club

<ul>
	<li class="page_item page-item-50">Chi siamo
	<li class="page_item page-item-53">La struttura
	<li class="page_item page-item-55">Dove siamo[/list]

<li class="page_item page-item-14">Tornei
<ul>
	<li class="page_item page-item-73">Informazioni

	<li class="page_item page-item-75">Tabelloni[/list]

[...][/list]

Prendendo spunto da vari esempi ho costruito questo codice, ma non capisco dove sia l'errore.
Nella pagina utilizzo questo javascript:

<script type="text/javascript">
// <![CDATA[
wpmenu1Hover = function() {
	var wpmEls = document.getElementById("wpmenu1").getElementsByTagName("li");
	for (var i=0; i<wpmEls.length; i++) {
		wpmEls[i].onmouseover=function() {
			this.className+=" wpmhover";
		}
		wpmEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" wpmhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", wpmenu1Hover);
// ]]>
</script>

e questo è il CSS (vi riporto solo la parte significativa):

.lavaLampWithImage li ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
	float:none;
}
.lavaLampWithImage li a:link, #mainmenucat ul li a:visited{
}
.lavaLampWithImage li a:hover, .lavaLampWithImage.current_page_item a .lavaLampWithImage  .select a{
	text-decoration:none;
}
/*1st sub level menu*/
.lavaLampWithImage li ul{
    position: absolute;
    left: 0;
    display: block;
    /* visibility: hidden; */
    margin:0 0 0 17px;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.lavaLampWithImage li ul li{
	display: list-item;
	float: none;
	font-size:1.0em;
	background:none;
	padding:0;

	float: left;
	margin: 0 0 10px 0;
	width: 170px;
	height: 25px;
	line-height: 25px;

}


/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.lavaLampWithImage li ul li ul{
	top: 0;
	margin:0;
}
/* Sub level menu links style */
.lavaLampWithImage li ul li a, .lavaLampWithImage li.current_page_item ul a, .lavaLampWithImage li.select ul a{
	width: 160px; /*width of sub menus*/
	height:auto;
	padding: 7px 5px 7px 10px;
	margin: 0 5px 0 0;
	border-bottom: 1px solid #676767;
	background:#5986B8;
	border-top-width: 0;
	text-align:left;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	text-transform:capitalize;
	text-indent: 15px;
	color: #fff;
}
.lavaLampWithImage li ul li a:hover{ /*sub menus hover style*/
	left: 0;
	text-decoration: underline;
}


.lavaLampWithImage li ul li a, .lavaLampWithImage li.current_page_item ul a, .lavaLampWithImage li.select ul a{
	left: -999em;
}

/*
.lavaLampWithImage li:hover ul ul, 
.lavaLampWithImage li:hover ul ul ul,
.lavaLampWithImage li:hover ul ul ul ul,  
.lavaLampWithImage li.wpmhover ul ul, 
.lavaLampWithImage li.wpmhover ul ul ul, 
.lavaLampWithImage li.wpmhover ul ul ul ul {
	left: -999em;
}*/

.lavaLampWithImage li:hover ul, 
.lavaLampWithImage li li:hover ul, 
.lavaLampWithImage li li li:hover ul, 
.lavaLampWithImage li li li li:hover ul,
.lavaLampWithImage li.wpmhover ul, 
.lavaLampWithImage li li.wpmhover ul, 
.lavaLampWithImage li li li.wpmhover ul,
.lavaLampWithImage li li li li.wpmhover ul{
	left: 0;
}

Sapete suggerirmi dove posso intervenire?
Grazie

[filo84]

Perdonate il doppio post, ma stamattina a mente fresca sono riuscito a fare qualche passettino in avanti.

In allegato c'è uno screenshot della situazione: Devo solo riuscire a far posizionare il sotto-menu sotto alla relativa voce del menu principale.
Altro aspetto: devo fare in modo che la dimensione di un sottomenu non influenzi il posizionamento delle voci del menu principale (ovvero vorrei le voci del menu principale tutte affiancate).

Purtroppo non ho trovato niente in giro, sapete aiutarmi?

Grazie!

[Mich_]

Tra i "link utili", alla voce menu, trovi varie raccolte di menu.
A me piacciono quelli di CSSplay, che sono fatti bene, con commenti all'interno dei codici.

Ritengo che fai meglio a prendere un menu gia` pronto e modificarne i colori/sfondi, piuttosto che inventare un menu da zero. Quando ne scegli uno, ricorda che i colori e i caratteri si modificano molto facilmente, mentre il comportamento nelle varie condizioni e` piu` complesso da cambiare.

[filo84]

Ciao Mich,
grazie mille per la risposta e per il consiglio.

Darò di certo un'occhiata ai menu che mi hai consigliato, ma vorrei ugualmente riuscire a risolvere questo ultimo problema che mi resta con questo menu: se riesco a spostare i sottomenu al posto giusto il gioco è fatto!

Ormai è anche una piccola sfida che, in qualche modo, mi sta permettendo di conoscere un pò il funzionamento dei css.

Quindi consigli per risolvere il mio problema sn bene accetti!