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:
codice:
<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:
codice:
<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):
codice:
.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