Sto realizzando un menu simpatico con i css unendo due tutorial ma ho dei problemi e non capisco dove...

Il primo tutorial serve per emulare la mappa cliccabile di un'immagine tramite css.

lo trovate qui: Tutorial mappatura

Questo funziona.

Adesso a questo tutorial ho unito un altro tutorial per far apparire un testo descrittivo del link al passaggio del mouse.

lo trovate qui: Tutorial scritte

Il passo successivo sarà far apparire un'immagine oltre al testo nella casella in alto dove c'è la x.

Il sito sul quale sto lavorando è il seguente Sito di mia sorella.


Veniamo al codice:

HTML:
codice:
 <div id="menu1">
<ul id="map1">
<li id="map1-link1"><span>Quadri</span>
<li id="map1-link2"><span>Ceramiche</span>
<li id="map1-link3"><span>Mostre</span>
<li id="map1-link4"><span>Contatti</span>[/list]
</div>
ed ecco il CSS:

codice:
 div#menu1 {
position: absolute;
top: 180px;
left: 0px;
z-index: 2;
}

ul#map1 {
margin:0;
padding:0;
list-style:none;
position:relative;
width:160px;
height:30px;
background:url("image/menu_home.gif") no-repeat;
} 
ul#map1 li {
display:block;
position:absolute;
margin:0;padding:0
}
li#map1-link1 {
left:4;top:0;
width:23px;height:23px
}
[...]
#map1 a {
display:block;
width:100%;
height:100%;
}
Questo di sopra è codice che funziona precisamente.
Questo di sotto è il codice del secondo tutorial. Quello che mi da i problemi .

Ho commentato la prima regola per mostrare i link altrimenti non si vedrebbe nulla.

Credo che il problema sia un conflitto di posizionamento. Commentando infatti da position fino a z-index qualcosa appare.

codice:
/*ul#map1  a span { display:none }*/

#map1 a:hover span { 
  display: block;
  position: absolute; 
  top: 200px; 
  left: 0; 
  width: 125px;
  padding: 5px; 
  margin: 10px; 
  z-index: 100;
  color: #AAA; 
  background: black;
  font: 10px Verdana, sans-serif; 
  text-align: center;
  }
Spero di essere stato completo e non prolisso.


Grazie mille

Luciano Amodio