menu orizz 3 livelli - come impostare attributi sul terzo?

[tappat]

Sto cercando di realizzare un menu a tendina orizzontale su tre livelli. (pagina home.aspx e foglio di stile)
Menu a sfondo nero, hover sfondo rosso, però funziona male.
Dal 1 al 2 livello funziona.
Passando sul 2. livello si apre bene il terzo ma le voci del terzo livello anzichè aprirsi a sfondo nero e poi diventare rosse al passaggio del mouse, si aprono a sfondo rosso e così restano.
Non so bene in effetti dove impostarle nel foglio di stile, che ho messo insieme con un collage! Non ci capisco + niente!
Qualcuno mi puo aiutare? Chi mi dice su quale delle classi del foglio di stile imposto questi attributi?
Grazie!!!!!!! Tappat

Questo è il codice del .css:
.menu
{
float: left;
width: 565px;
height: 55px;
padding-left: 16px;
padding-right: 6px;
padding-top: 22px;
text-align: center;
font-family: Verdana;
font-size: 8pt;
color: #FFFFFF;
}
.menu ul
{
list-style:none;
margin:0;
padding:0;
}
.menu a {
display:block;
color: #FFFFFF;
text-decoration:none;
font-weight:normal;
line-height:30px;
margin:0px;
padding:0px 15px;
text-align:center;
font: Verdana, Tahoma, sans-serif;
}
.menu a:hover {
background: url(../images/hover.png) #ad0101 no-repeat bottom center;
color:#FFFFFF;
text-decoration:none;
}
.menu li{
float:left;
padding:0px;
position: relative;
}
.menu ul ul
{
position: absolute;
z-index: 500;
}
.menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

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

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

.menu li a{
display:block;
font-weight:normal;
line-height:30px;
margin:0px;
padding:0px 15px;
text-align:center;
text-decoration:none;
color: #FFFFFF;
}
.menu li.current a
{
display: block;
font-weight: normal;
line-height: 30px;
margin: 0px;
padding: 0px 15px;
text-align: center;
text-decoration: none;
color: #FFFFFF;
background-position: center bottom;
background-image: url(../images/current.png);
background-repeat: repeat-x;
}
.menu li a:hover, .menu ul li:hover a{
background: url(../images/hover.png) #ad0101 no-repeat bottom center;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#2F3130;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
}
.menu li:hover ul{
display:block;
}
.menu li li
{
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 225px;
background-image: url(../images/sep.gif);
background-repeat: no-repeat;
background-position: left bottom;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:30px;
font-size:10px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a
{
background: url(../images/hover_sub.png) #ad0101 no-repeat left center;
border: 0px;
color: #ffffff;
font-size: 10px;
text-decoration: none;
}

[Mich_]

Quando posti codice, usa i tag appositi (ad esempio mediante il bottone CODE sopra l'area di inserimento testo): come postato si e` persa la formattazione ed e` difficile seguire la logica.
E un codice CSS senza l'HTML corrispondente e` monco (occorre immaginare l'HTML, ma immaginando si prendono cantonate).

E in caso di codice complesso, conviene postare un link alla pagina: risulta molto piu` semplice darti una mano.

Comunque in linea di massima i menu conviene copiarli, modificandone l'aspetto, non la funzionalita`.
Quindi il consiglio e` di scegliere un menu a tre livelli, ed adattarne la grafica.

Nel tuo codice CSS non vedo un selettore del tipo
.menu li li li
.menu li li a:hover li
che di solito sono quelli usati per formattare il terzo livello (pero` occorre dire che ci sono altre combinazioni di selettori che possono formattare i vari livelli del menu).