Accordion menu e posizione div

[miagy]

Ciao ragazzi,

Ho creato una strutturazione molto basic con CSS e java al fine di creare un menu a fisarmonica, in cui facendo click sull'immagine si apre un sottomenu..
Dato lo sfondo particolare, per le diverse immagini ho dovuto usare un div position, poiché esse vanno in punti specifici della pagina.

Tutto funziona perfettamente, tranne per un particolare: il menu non si allinea con le immagini.
In sostanza, il risultato che vorrei ottenere è questo:

Esempio

Qui di seguito invece la pagina esemplificativa in cui potete testare il problema: Pagina

Se poteste aiutarmi con questo problema, vi sarei eternamente debitore, perché credo che il problema sia nel CSS

Qui di seguito il codice:

CSS

 #pic-wrapper{
     cursor:pointer
}
#pic{
-moz-transition:all 1s ease-out;
-webkit-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
-ms-transition:all 1s ease-out;
position:absolute;
z-index:1;
opacity:1
}
#pic-inner{
z-index:0;
position:absolute;
}
#pic:hover{
opacity:0
}
/*PICS*/
.ambientazione {
   position: absolute;
   top: 116px;
   left: 18px;
   z-index: -1;
}


.regolamento {
   position: absolute;
   top: 178px;
   left: 18px;
}

.primi_passi {
   position: absolute;
   top: 240px;
   left: 18px;
}

.manuale {
   position: absolute;
   top: 302px;
   left: 18px;
}

.combattimento {
   position: absolute;
   top: 364px;
   left: 18px;
}

.staff {
   position: absolute;
   top: 426px;
   left: 18px;
}

/*ACCORDION MENU */
  .accordion {
  overflow: hidden;
  border-radius: 4px;
  background: transparent;
}

.accordion-section-title {
  width: 100%;
  padding: 15px;
}

.accordion-section-title {
  width: 100%;
  padding: 15px;
  display: inline-block;
  background: transparent;
  border-bottom: 1px solid #1a1a1a;
  font-size: 1.2em;
  color: #fff;
  transition: all linear 0.5s;
  text-decoration: none;
}

.accordion-section-title.active {
  background-color: transparent;
  text-decoration: none;
}

.accordion-section-title:hover {
  background-color: transparent;
  text-decoration: none;
}

.accordion-section:last-child .accordion-section-title {
  border-bottom: none;
}

.accordion-section-content {
  padding: 15px;
  display: none;
  color: white;
}

.accordion-section {
}

JS

 $('.accordion-section-title').click(function(e) {
  var currentAttrvalue = $(this).attr('href');

  if ($(e.target).is('.active')) {
    $(this).removeClass('active');
    $('.accordion-section-content:visible').slideUp(300);

  } else {
    $('.accordion-section-title').removeClass('active').filter(this).addClass('active');
    $('.accordion-section-content').slideUp(300).filter(currentAttrvalue).slideDown(300);
  }
});

HTML

<div id="pic-wrapper">


<div class="accordion">


  <div class="accordion-section">
 
 
    <a class="accordion-section-title" href="#accordion-1">
       <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/manuale_ambientazione.png" id="pic" class="ambientazione">
      <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/ambientazione_manuale_mouseover.gif" id="pic-inner" class="ambientazione">
     </a>
    
    <div id="accordion-1" class="accordion-section-content">
      <p>Ambientazione</p>
    </div>
    
    <a class="accordion-section-title" href="#accordion-2">
    <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/manuale_regolamento.png" id="pic" class="regolamento">
     <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/regolamento_manuale_mouseover.gif" id="pic-inner" class="regolamento">
     </a>
    <div id="accordion-2" class="accordion-section-content">
      <p> Regolamento</p>
    </div>
    
    
    <a class="accordion-section-title" href="#accordion-3">
    <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/manuale_primi_passi.png" id="pic" class="primi_passi">
     <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/primi_passi_manuale_mouseover.gif" id="pic-inner" class="primi_passi">
     </a>
    <div id="accordion-3" class="accordion-section-content">
      <p> primi_passi</p>
    </div>
    
    
    <a class="accordion-section-title" href="#accordion-4">
    <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/manuale_manuale.png" id="pic" class="manuale">
     <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/manuale_manuale_mouseover.gif" id="pic-inner" class="manuale">
     </a>
    <div id="accordion-4" class="accordion-section-content">
      <p> manuale</p>
    </div>
    
    
    <a class="accordion-section-title" href="#accordion-5">
      <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/manuale_combattimento.png" id="pic" class="combattimento">
      <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/combattimento_manuale_mouseover.gif" id="pic-inner" class="combattimento">
    </a>
    <div id="accordion-5" class="accordion-section-content">
      <p> Combattimento</p>
    </div>
    
    
    
    <a class="accordion-section-title" href="#accordion-6">
      <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/manuale_staff.png" id="pic" class="staff">
      <img src="http://japancrystal.altervista.org/themes/crystal/imgs/documentazione/staff_manuale_mouseover.gif" id="pic-inner" class="staff">
    </a>
    <div id="accordion-6" class="accordion-section-content">
      <p> Staff menu</p>
    </div>
    
    
    
  </div>
</div>
</div>