Salve a tutti. Sto facendo il mio sito, ed essendo alle prime armi con il css ho riscontrato un problema con il menu a tendina.

Ecco il codice Html:

codice:
 <div class="menu-storia">
      <ul>
        <li><a href="#" target="_self"><img src="../Images/Lente.png"><p>Prefazione</p></a></li>
        <li><a href="Prima_della_città.php" target="_self"><img src="../Images/Localizzatore.png"><p>Prima della città</p></a></li>
        <li><a href="città_Alto-medievale.php" target="_self"><img src="../Images/Cartella.png"><p>La città alto-medioevale</p></a></li>
              <ul class="menu-storia prima">
                <li>
                    <a href="La_proprietà_terriera.php">La proprietà terriera</a>
                </li>
                <li>
                    <a href="Clima.php">Clima</a>
                </li>
                <li>
                    <a href="Cibo.php">Il cibo</a>
                </li>
             </ul>
        <li><a href="#" target="_self"><img src="../Images/Persona.png"><p>La città vicina</p></a></li>
        <li><a href="#" target="_self"><img src="../Images/Persona.png"><p>La città rivale</p></a></li>
        <li><a href="#" target="_self"><img src="../Images/Persona.png"><p>Dopo la bevuta</p></a></li>
        <li><a href="#" target="_self"><img src="../Images/Castello.png"><p>Nel castello</p></a></li>
        <ul class="seconda">
                <li>
                    <a href="La proprietà terriera.php">La Chiesa</a>
                </li>
                <li>
                    <a href="La proprietà terriera.php">La torre</a>
                </li>
                <li>
                    <a href="La proprietà terriera.php">Le mura</a>
                </li>
             </ul>
        <li><a href="#" target="_self"><img src="../Images/Libro.png"><p>Le fonti</p></a></li>
      </ul>
  </div>
ed ecco il css:

codice:
.menu-storia ul {
  list-style:none;
}


.menu-storia ul li {
  border-top:1px solid rgba(0,0,0,0.1);
  padding:0px;
  box-shadow:inset 0 1px 1px #fff;
  text-indent:10px;
  height: 20px;
  }


.menu-storia ul li a {
  font-size:14px;
  color:#a4a3a3;
  font-family: 'Strait', sans-serif;
  font-size:14px;
  text-decoration:none;
  text-shadow: 1px 1px 1px #fff;
}


.menu-storia ul li img {
  float:left;
  margin:2px 0 0 0;
}


.menu-storia ul li:hover {
  border-left:3px solid #1e83b6;
  background-color:rgba(0,0,0,0.02); 
  height: 20px;
}


.menu-storia ul ul {
  display: none;
}


.prima li:hover {
  display:block;
  z-index:1;
}


.seconda ul {
  display: none;
}


.seconda ul:hover {
  display:block;
  z-index:1;
}
La mia intenzione: fare un menù a tendine con due diverse sezioni separate, che si aprano in modo asincrono. Dove passando il mouse sulla voce 1 apra solo una sottovoce A, B, ecc. e passando alla voce 2 apra un'altra tendina con A,b e c diversi.
Risultati: per ora il risultato migliore è stato quello di far aprire entrambe le tendine contemporaneamente al passaggio su una parte casuale del ul.

Ho provato a dividere le due diverse sotto classi con due nomi diversi, ma in questo caso non funzionava il comando "display:none" nelle varie sottoclassi.

Vi prego, aiutatemi