a:link { color: #000080; text-decoration: none } a:visited { color: #000080; text-decoration: none } a:hover { color: #ff0000; background-color: #99ccff } a:active { color: #000080; text-decoration: none } .menu { font-size: 8 pt; font-family: Arial; color: #0066CC } .testo { font-family: Arial, Helvetica, sans-serif; color: #000080; font-size: 8 pt } .1testo { font-family: Arial, Helvetica, sans-serif; color: #000080; font-size: 10 pt } H1 { font-size:14px; font-family:arial; color:green } H2 { font-size:14px; font-family:arial; color:red } .miaClasse {width:132px;height:10;background-color:#F2FcFf;padding-left:1px;padding-right:10px;} .menu a:link { color: #004080; text-decoration: none} .menu a:visited { color: #004080; text-decoration: none } .menu a:hover { color: #ff0000; text-decoration: underline; background-color: #ffff66 } .menu a:active { color: #004080; text-decoration: none} br { border: 2 solid #0099CC } font { font-size: 8 pt; color: #000080; font-family: Arial } form { background-color: #F2FCFF; border: 2 ridge #3399FF } table { background-color: #ffffff; font-family: Arial; font-size: 8 pt; color: #000080; border: 0 solid #ffffFF } title { color: #0000FF; font-weight: bold } .atitle { color: #ff0000; font-weight: bold; font-size: 14 } .btitle { color: #ff0000; font-size: 12 } .ctitle { color: #000000; font-size: 14 } ul.menu1 { width:140px; background: #666; color: #FFF; font: 10px verdana, helvetica, sans-serif; list-style: none; /* elimino i punti elenco */ margin:0; padding:0; /* elimino i rientri delle liste - padding:0 per Gecko */ text-align: right; } ul.menu1 li { border-top:1px solid #FFF; /* effetto bottone - gioco con i colori */ border-bottom: 1px solid #000; /* effetto bottone - gioco con i colori */ line-height: 1.20em; /* imposto il line-height per avere un bottone grande come i font più un margine - verticale - pari al 20% */ background: #FFF; } ul.menu1 li a { display: block; /* il link occuperà tutta lo spzio orizzontale. Con Gecko -- Moz. NN. -- tutto lo spazio orizzontale è clickabile */ text-decoration: none; /* elimino la sottolineatura al link, è evidente che si tratta di un link */ border-right: 10px solid; /* imposto dimensione e stile del bordo su cui voglio intevenire */ padding-right: 10px; /* più leggibile */ font-weight: bold; } ul.menu1 li a:link, ul.menu1 li a:visited { border-color: #009; /* imposto il colore del bordo del link inattivo */ color: #009; } ul.menu1 li a:hover, ul.menu1 li a:active { border-color: #C00; /* effetto roll-hover modificando il colore del bordo del link */ background: #999; /* effetto roll-hover modificando anche il colore di sfondo del link */ color: #C00; /* effetto roll-hover modificando anche il colore del link */ } ul.menu2 { width:140px; background: #666; color: #FFF; font: 10px verdana, helvetica, sans-serif; list-style: none; /* elimino i punti elenco */ margin:0; padding:0; /* elimino i rientri delle liste - padding:0 per Gecko */ text-align: center; } ul.menu2 li { line-height: 1.20em; /* imposto il line-height per avere un bottone grande come i font più un margine - verticale - pari al 20% */ border-bottom: 1px solid #FFF; /* evita un errore di interpretazione di IE -- sempre lui! -- */ margin-top:-1px; /* elimina il margine creato dalla precente regola */ background: #99ccff; } ul.menu2 li a { display: block; /* il link occuperà tutta lo spzio orizzontale. Con Gecko -- Moz. NN. -- tutto lo spazio orizzontale è clickabile */ text-decoration: none; /* elimino la sottolineatura al link, è evidente che si tratta di un link */ font-weight: bold; text-transform: uppercase; } ul.menu2 li a:link, ul.menu2 li a:visited { border:2px outset #CCC; /* effetto bottone */ color: #003; } ul.menu2 li a:hover { background: #0066ff; /* effetto roll-hover modificando il colore di sfondo del link */ color: #ffffff; /* effetto roll-hover modificando anche il colore del link */ } ul.menu2 li a:active { border:2px inset #CCC; /* effetto bottone premuto */ } ul.menu3 { width:140px; background: #666; color: #FFF; font: 10px verdana, helvetica, sans-serif; list-style: none; /* elimino i punti elenco */ margin:0; padding:0; /* elimino i rientri delle liste - padding:0 per Gecko */ } ul.menu3 li { border-top:1px solid #FFF; /* effetto bottone - gioco con i colori */ border-bottom: 1px solid #000; /* effetto bottone - gioco con i colori */ line-height: 1.20em; /* imposto il line-height per avere un bottone grande come i font più un margine - verticale - pari al 20% */ background: #fafaff; } ul.menu3 li a { display: block; /* il link occuperà tutta lo spzio orizzontale. Con Gecko -- Moz. NN. -- tutto lo spazio orizzontale è clickabile */ text-decoration: none; /* elimino la sottolineatura al link, è evidente che si tratta di un link */ padding-left: 10px; /* più leggibile */ color: #009; font-weight: bold; } ul.menu3 li a span.freccia { display: none; /* nasconde la freccia '»' -- vedi codice (X)HTML */ } ul.menu3 li a:hover, ul.menu3 li a:active { color: #C00; /* effetto roll-hover modificando il colore del link */ } ul.menu3 li a:hover span.freccia, ul.menu3 li a:active span.freccia { display: inline; /* effetto roll-hover: mostra la freccia '»' -- vedi codice (X)HTML */ }