menu tre livelli

[minnie71]

Ciao,
ho fatto un menu a tre livelli, ma li terzo proprio non sono riuscita a farlo. Potreste darmi una mano? Ecco il codice:

HTML:
<dl id="menu">
		<dt onmouseover="javascript:montre('smenu1');">ChiSiamo</dt>
		<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Servizi</dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
				<ul>
					[*]CentroCopie
					[*]Assistenza
				[/list]
			</dd>	
		<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">Novità</dt>
		<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">Catalogo</dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
				<ul>
					[*]Cat AAA
						<dd class="livello" id="DUEsmenu5" onmouseover="javascript:montre('DUEsmenu5');" onmouseout="javascript:montre();">
							<ul>
								[*]AAA 1
								[*]AAA 2
								[*]AAA 3
								[*]AAA 4	
								[*]AAA 5				
							[/list]
						</dd>
					[*]Cat BBB
						<dd class="livello" id="DUEsmenu6" onmouseover="javascript:montre('DUEsmenu6');" onmouseout="javascript:montre();">
							<ul>
								[*]BBB 1
								[*]BBB 2
								[*]BBB 3
								[*]BBB 4	
								[*]BBB 5				
							[/list]
						</dd>					
					[*]Cat CCC
						<dd class="livello" id="DUEsmenu7" onmouseover="javascript:montre('DUEsmenu7');" onmouseout="javascript:montre();">
							<ul>
								[*]CCC 1
								[*]CCC 2
								[*]CCC 3
								[*]CCC 4	
								[*]CCC 5				
							[/list]
						</dd>					
					[*]Cat DDD	
						<dd class="livello" id="DUEsmenu8" onmouseover="javascript:montre('DUEsmenu8');" onmouseout="javascript:montre();">
							<ul>
								[*]DDD 1
								[*]DDD 2
								[*]DDD 3
								[*]DDD 4	
								[*]DDD 5				
							[/list]
						</dd>					
					[*]Cat EEE	
						<dd class="livello" id="DUEsmenu9" onmouseover="javascript:montre('DUEsmenu9');" onmouseout="javascript:montre();">
							<ul>
								[*]EEE 1
								[*]EEE 2
								[*]EEE 3
								[*]EEE 4	
								[*]EEE 5				
							[/list]
						</dd>								
				[/list]
			</dd>			
		<dt onmouseover="javascript:montre('smenu10');" onmouseout="javascript:montre();">Privato</dt>
			<dd id="smenu10" onmouseover="javascript:montre('smenu10');" onmouseout="javascript:montre();">
				<ul>
					[*]Articoli
					[*]Contatti
					[*]Novità
					[*]Ordini	
					[*]Categorie				
				[/list]
			</dd>
</dl>

CSS:

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 5.5em;
left: -2.5em;
width: 10em;
}

#menu dt {
cursor: pointer;
background: #A9BFCB;
height: 10px;
line-height: 20px;
margin: 2px 0;
border: 1px solid gray;
text-align: left;
font-weight: bold;
}
#menu dd {
position: absolute;
z-index: 100;
left: 1.9em;
margin-top: -0.5em;
width: 8em;
background: #A9BFCB;
text-align: left;
border: 1px solid gray;
}

#menu dd.livello {
position: absolute;
z-index: 100;
left: 2.9em;
margin-top: -0.5em;
width: 8em;
background: #A9BFCB;
text-align: left;
border: 1px solid red;
}

#menu ul {
padding: 2px;
text-align: left;
}
#menu li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
text-align: left;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
text-align: left;
}
#menu li a:hover {
text-decoration: underline;
text-align: left;
}
#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;color: #222;}
#mentions a:hover{text-decoration: underline;}

Grazie Mille sono 2 gg che ci sbatto il naso

[pierofix]

Questo lo avevi già letto?

- www.htmldog.com/articles/suckerfish/dropdowns/

Forse può esserti d'aiuto come guida.

[minnie71]

non lo avevo visto, molto interessante. Ma vorrei riuscire a mettere quello che ho messo in codice perchè lo spazio è poco ... deve stare tutto a Sx