@charset "iso-8859-1";
/* CSS Document */
/*regole per avere un menu di navigazione orizzontale con pulsanti immagine con menu a tendina fino a due livelli partendo da una lista*/
/*MenuVerticaleTendina.css   ultima modifica 14-03-2009  */

div.menuversotto {
width:150px;  /*larghezza di ogni voce del menu, porre uguale alla larghezza del pulsante come in width di div.menuversotto li riga26*/

text-align:left;  /*da l'allineamento orizzontale del testo nel menu principale: se ci sono pulsanti grafici è meglio posizionarlo al centro del pulsante con text-align:center , se invece non voglio pulsanti ma rettangoli, è meglio text-align:left */
margin: 0 ;/*non cambiare*/
padding: 0;/*non cambiare*/
font-family:Verdana, Arial,Helvetica,sans-serif;/*scegliere a piacere*/
font-size:11px;/*scegliere a piacere*/
font-weight:600;/*scegliere a piacere*/
background-color: #FFFF99;
 /*a questo punto sarebbe bene poter inserire un bordo colorato che raccolga il menu per intero border: 1px solid black ma ie non gradisce la cosa, per ora si rinuncia*/
}
div.menuversotto ul {  
margin: 0;
padding: 0;
list-style-type: none;/*per eliminare il selettore in tutte le liste e le sottoliste*/
/*background: green; colore della striscia verticale del menu sotto i pulsanti, facoltativa*/
}
div.menuversotto li { /*definisce il modo di apparire delle voci principali del menu*/
height:30px; /*altezza di ogni voce del menu, porre uguale all'altezza del pulsante*/
line-height:30px;/*porre uguale al valore precedente height per dare la centratura verticale del testo nel pulsante rispetto al suo box contenitore*/
margin: 0;  /* azzera i margini, non modificabile */
padding: 0;
background-color: #FFFF99;/*colore dello sfondo dei singoli pulsanti e su tutte le tendine*/
margin-top: 2px;/*inserisce una piccola distanza rispetto al pulsante superiore, inserire a piacere*/
background-image:none; /*se non si vuole il pulsante immagine ma solo il rettangolo impostare background-image:none */

/* i seguenti codici aggiungono un bordo  attorno ad ogni singolo pulsante, modificabile */

border-bottom: 1px solid #336633;
border-right: 1px solid #336633; 

/*fine bordo pulsante*/
}



div.menuversotto a { /* definisce gli stili per i link testuali*/
display: block;
padding: 0;
color: #336633;
text-decoration: none; /*toglie la sottolineatura sotto il link*/

padding-left:5px; /*da inserire se si è messo text-align:left dentro il div.menuversotto per staccare un poco il testo dal bordo sinistro del rettangolo di menu*/
margin: 0;  /* azzera i margini, non modificabile */ 
}

div.menuversotto a:hover { /* definisce il rollover al passaggio del mouse */ 
background-color: #336633;
color:#FFFF99; /*colore del testo al passaggio, impostare a piacere*/
background-image:none; /* se non si vuole il pulsante ma il rettangolo impostare background-image:none*/
}


/* da questo momento in poi cominciano i codici per le tendine*/


div.menuversotto li ul {display: none}/*non fa comparire la tendina nello stato di base del menu*/

div.menuversotto li:hover ul{  /* regola che definisce il modo di presentarsi dei sottomenu al passaggio del mouse */
display: block;  /* fa apparire il sottomenu al passaggio del mouse */
position: absolute;
z-index:1;     /* fa apparire il sottomenu in primo piano, non cambiare impostazione */
width:130px;    /* larghezza del sottomenu, impostabile a piacere */
padding: 0;
text-align: left;
margin-top: -30px;  /*posizione in verticale del sottomenu rispetto alla barra del menu, impostare = all'altezza dell'immagine del pulsante con segno meno*/
margin-bottom:0px; /*posizione del sottomenu rispetto alla voce di menu corrispondente, non modificare*/
margin-left:148px;  /*posizione del sottomenu rispetto alla voce di menu corrispondente, porre = alla larghezza del pulsante meno 2 pixel per far si che si sovraponga appena al menu principale */
margin-right:0px; /*posizione del sottomenu rispetto alla voce di menu corrispondente, non modificare*/
/*border:1px solid green; /* imposta un bordo che raccoglie il sottomenu, facoltativo */

}
div.menuversotto li li {/* regole che definiscono i box che contengono le voci del sottomenu di primo livello*/
width:142px; /*larghezza del box contenitore della voce del sottomenu, porre uguale al valore di width dato in div.menuversotto li:hover ul o poco più piccolo */
height:25px; /*altezza del box contenitore varia la distanza tra una voce e l'altra, impostabile a piacere*/
line-height:25px;/*porre uguale al valore precedente per dare la centratura verticale del testo rispetto al box contenitore*/
background-image: none ; /*toglie l'immagine di sfondo per evitare che si replichi l'immagine del pulsante del menu principale*/
background-color: #FFFF99; /* colore dello sfondo del sottomenu */
margin: 0 0 0 0;
/*imposta un bordo colorato intorno ad ogni voce del menu di 1° livello*/
border-color:green;
border-style:solid;
border-width:1px;

} 
div.menuversotto li li a {
width:138px;/*impostare uguale al valore assegnato a width dato in div.menuversotto li li meno il numero  di pixel dato in padding-left in questo caso è 142-4=138*/
height:25px;  /*altezza del box contenitore varia la distanza tra una voce e l'altra, porre obbligatoriamente sempre lo stesso valore  inserito in  height:  in div.menuversotto li li */
padding-left: 4px; /*posiziona la voce di del sottomenu spostandola verso destra all'interno del suo box contenitore, impostabile a piacere senza esagerare */
padding-top: 0px; /*non modificare*/
padding-right: 0px;/*non modificare*/
padding-bottom: 0px;/*non modificare*/
text-align:left;
} 
div.menuversotto li li:hover a { /*effetto rollover sul link del sottomenu al passaggio del mouse*/
background-image: none; /*toglie l'immagine di sfondo per evitare che si replichi l'immagine del pulsante del menu principale*/
background-color:#336633;
color: #FFFF99; 
 }

/*stili che si applicano alle tendine di 2° livello*/
div.menuversotto li:hover li ul{ display: none;} /*rende invisibile il sottomenu di 2° livello al passaggio del mouse sulla tendina di 1° livello*/       
div.menuversotto  li li:hover ul{ display: block;}/*fa apparire la tendina di 2° livello al passaggio del mouse*/
div.tendinaver{  /* regola che definisce il modo di presentarsi dei sottomenu di 2° livello al passaggio del mouse */
/*display: block;  /* fa apparire il sottomenu di 2° liv. al passaggio del mouse */
position: absolute;
z-index:10;     /* fa apparire il sottomenu di 2° liv. in primo piano, non cambiare impostazione */
/*width:200px;    /* larghezza del sottomenu, impostabile a piacere */
padding: 0;
margin-top: 5px;  /*posizione in verticale del sottomenu di 2° liv. rispetto alla corrispondente voce del sottomenu, impostare in base all'altezza della voce del sottomenu corrispondente*/
margin-bottom:0px; /*posizione del sottomenu di 2° liv. rispetto alla voce di menu corrispondente, non modificare*/
margin-left:-5px;  /*posizione del sottomenu di 2° liv. rispetto alla voce di menu corrispondente, sistemare in base alla posizione del menu superiore*/
margin-right:0px; /*posizione del sottomenu rispetto alla voce di menu corrispondente, non modificare*/

}
div.tendinaver ul li  {/* regole che definiscono i box che contengono le voci del sottomenu di 2° livello*/
width:240px; /*larghezza del box contenitore della voce del sottomenu, porre uguale al valore di width dato in div.menuversotto li:hover ul o poco più piccolo */
height:25px; /*altezza del box contenitore varia la distanza tra una voce e l'altra, impostabile a piacere*/
line-height:25px;/*porre uguale al valore precedente per dare la centratura verticale del testo rispetto al box contenitore*/
background-image: none ; /*toglie l'immagine di sfondo per evitare che si replichi l'immagine del pulsante del menu principale*/

margin: 0 0 0 0;
/*imposta un bordo colorato intorno ad ogni voce del menu di 1° livello*/
border-color: #336633;
border-style:solid;
border-width:1px;
} 
div.tendinaver ul li a {/*regole che definiscono le voci del sottomenu di 2° livello*/
width:236px;/*larghezza delle voci del sottomenu  porre uguale a width di div.tendinaver ul li meno il valore 4px di padding left: 300-4=296*/

 }
div.tendinaver ul li a:hover { /*effetto rollover sul link del sottomenu di 2° livello al passaggio del mouse*/
background-image: none; /*toglie l'immagine di sfondo per evitare che si replichi l'immagine del pulsante del menu principale*/
background-color: #FFFF99;
color: #336633; 
width:236px; 
 }