Salve, ho un problema con un menu..quando si passa con il mouse sopra una voce, appaiono tutte le sottovoce del menu, non solo quella desiderata!!

vi posto lo script css e html:

ul.sdt_menu{
margin:0;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:16px;
width:1200px;
}
ul.sdt_menu a{
text-decoration:none;
outline:none;
}
ul.sdt_menu li{
float:left;
width:195px;
height:85px;
position:relative;
cursorointer;

}
ul.sdt_menu li > a{
position:absolute;
top:-95px;
left:50px;

width:195px;
height:100px;


}
ul.sdt_menu li a img{
border:none;
position:absolute;
width:0px;
height:0px;
bottom:0px;
left:85px;
z-index:100;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
margin: auto;
text-align: center;
position:absolute;
top:25px;
left:0px;
width:199px;
height:60px;
z-index:15;
}
ul.sdt_menu li span.sdt_active{
position:absolute;
background:#111;
top:85px;
width:199px;
height:0px;
left:0px;
z-index:14;
-moz-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000 inset;
box-shadow:0px 0px 4px #000 inset;
}

/*menu destra e sinistra*/
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
margin: auto;
text-align: center;
text-transform:uppercase;
text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
color:#fff;
font-size:28px;
text-align: center;

}

ul.sdt_menu li div.sdt_box{
margin-left: 50px;
padding-left: 20px;
display:block;
position:absolute;
width:179px;
top:110px;

display:none;
background:#000;

}
ul.sdt_menu li div.sdt_box a{
float:left;
clear:both;
line-height:30px;
color:#0B75AF;
}


ul.sdt_menu li div.sdt_box a:first-child{
margin-top:10px;
}

ul.sdt_menu li div.sdt_box a:hover{
color: yellow;
}

ul.sdt_menu li div.sdt_box div.sdt_box1 a{
display: none;
margin-left: 50px;
margin-right: 50px;
float:left;
clear:both;
line-height:30px;
color:red;
margin-top: 0px;
}

ul.sdt_menu li div.sdt_box:hover div.sdt_box1 a{
display: block;
margin-left: 50px;
margin-right: 50px;
float:left;
clear:both;
line-height:30px;
color:red;
margin-top: 0px;
}

Qui sotto, se non sbaglio, dovrebbe farmi apparire il contenuto del div "div.sdt_box1" quando sono sul contenuto del div "div.sdt_box" giusto?..questi div all'interno del menu mi hano totalmente mandato in confusione..

ul.sdt_menu li div.sdt_box:hover div.sdt_box1 a{
display: block;
margin-left: 50px;
margin-right: 50px;
float:left;
clear:both;
line-height:30px;
color:red;
margin-top: 0px;

}


Codice HTML:


<div class="content">

<ul id="sdt_menu" class="sdt_menu">[*]
<a href="index.php">
[img]images/menu/home_menu.jpg[/img]
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Home</span>

</span>
</a>

[*]
<a href="#">
[img]images/menu/flower_menu.jpg[/img]
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Discipline</span>

</span>
</a>
[*]
<a href="#">
[img]images/menu/yin_yang_menu.jpg[/img]
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Associazione</span>

</span>
</a>
<div class="sdt_box">

Websites

<div class="sdt_box1">
ciccio
Illustrations
Photography
</div>

Illustrations

<div class="sdt_box1">
pippo
Illustrations
Photography
</div>

Photography
</div>
[*]
<a href="#">
[img]images/menu/news_menu.jpg[/img]
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Corsi e Seminari</span>

</span>
</a>
[/list]
</div>


Vi prego aiutatemi perchè è due giorni che ci lotto e non ne vengo a capo…se poi non ci capite bene vi posso postare in maniera piu schematica il tutto..