Salve a tutti, mi sono iscritto per chiedere un aiuto sulla realizzazione di un menù a scomparsa orizzontale inline.
Questo dovrebbe essere il risultato:





Premessa: E' la prima volta che provo ad realizzare un menù e ho preso come esempio principale quello messo a disposizione su un altro sito.



Ora vi posto il codice html della parte di quel che ho tentato di fare:

Il problema più evidente che i rullover, usati per la prima parte del menà, non vengono visualizzati.


Css:
[Spoiler]
codice:
#Menu {
	margin-top: 3px; 
	height: 80px;
	width: 930px; 
	margin-left: 214px;
	padding-left: 8px;
}

.ul{
   float : left;
   height : 30px;
	margin:0px 0px 0px 0px;  /* zero margin*/ 
	padding :0px 0px 0px 0px; /* zero padding*/
	border :0px 0px 0px 0px; /* niente bordi*/
    width : 730px; 
	list-style-type : none; /* non ha puntatura*/
}

.ul li {
     float:left;
      height : 30px; /* altezza della lista*/
      width : 101px; /* larghezza della lista*/
      margin : 0px 0px 0px 0px; /* senza margine*/
      padding :0px 0px 0px 0px; /* non si distanzia*/
      border : 0px 0px 0px 0px;
      list-style-type : none; /* senza puntatura*/
      display : inline; /* si espande per tutta la larghezza su di un ' unica linea*/
	  text-align:center;
	  font-size: 10px;
	  }
	  
.ul li a{
      height : 30px; /* altezza della lista*/
      float : left; /* importante*/
      width : 100px; /*  larghezza della lista*/
      text-decoration : none; /* non ha sottolineatura*/
      background-color : #000;
      margin:0px 0px 0px 0px;
      padding:0px 0px 0px 0px;
      display : inline; 
}
.ul li a:link, .ul li a:hover, .ul li a:active, .ul li a:visited {
    color:#333;
    text-decoration : none;
    background-color:#FFF;
    font-weight : 600;
}
/*.ul li a:hover, .ul li a:active{
	 color:#333;
    text-decoration : none;
    background-color:#FFF;
    font-weight : 600;
	
}
.ul li a:visited{
	 color:#333;
    text-decoration : none;
    background-color:#FFF;
    font-weight : 600;
}
*/
.gold{
    height : 25px;
    vertical-align : bottom;
}

#menu01[id], #menu02[id], #menu03[id], #menu04[id], #menu05[id], #menu06[id], #menu07[id], #menu08[id], #menu09[id], #menu10[id], #menu11[id], #menu12[id]{
  position:absolute;
}

#menu01, #menu02, #menu03, #menu04, #menu05, #menu06, #menu07, #menu08, #menu09, #menu10, #menu11, #menu12{
	border:0px 0px 0px 0px;
	margin:5px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	position : absolute; /*importantissimo*/
	height:79px; /*importantissimo!!!! altezza del menu impostata a 0px altrimenti fa casino*/
	width : 938px; /*e' importante che sia largo almeno un px in piu' della classe .ul*/
	top : 102px; /*distanza assoluta dal top della pagina*/
	left : 214px; /* distanza assoluta dal left della pagina*/
	
}
#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8, #div9, #div10, #div11, #div12{
    border:0px 0px 0px 0px;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    top : 0px; /*rispetto a menu01, menu02...*/
    position : relative; /*importantissimo*/
    width : 70px; /*larghezza di ogni menu*/
    height : 30px; /*altezza di ogni menu*/
    

}

/* settaggio di  ogni singolo menu in orizzontale. */
#div1{
	left:17px;
}
#div2{
	left:98px;
}
#div3{
	left:180px;
}
#div4{
	left:303px;
}
#div5{
	left:404px;
}
#div6{
	left:505px;
}
#div7{
	left:606px;
}
#div8{
	left:707px;
}
#div9{
	left:808px;
}
#div10{
	left:909px;
}
#div11{
	left:1010px;
}
#div12{
	left:1111px;
}

/* inizio della dichiarazione delle classi che richiamano il menu. I menu funzionano in virtu' di questo richiamo*/
.Down img {
	/* quando il menu e' a riposo non è visibile*/
	display:none;
	visibility:hidden;
}
html >body .Up img{
/*questa dichiarazione si rende necessaria per i browser gecko : non serve far apparire
l'immagine perche' il menu scorra, ma serve per IE, che capisce meno di un tubo*/
	display:none;
	visibility:hidden;
}
.Up img  { /* classe che viene richiamata quando il mouse passa sul menu*/
 display:inherit;
	visibility:hidden;
    /*il menu e' visibile e lo rimane fino a quando il mouse rimane sul menu*/
}
.Down .ul{
display:none;
	
}
.Up .ul{
	 display:inherit;
}
 
/*.gold{
	text-align: center;
	background-color:#FFF;
	color: #415A3D0;
}*/


/*td{
	padding-left: 7px;
	}*/
[/Spoiler]


Grazie per l'aiuto.