Problemi con la tendina di un menu.

[MarcoSpillino]

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:

 <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:

.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

[Mich_]

Anzitutto ci sono errori semantici nel codice HTML, e questo impedisce al CSS di lavorare correttamente.

Una lista con sottoliste dovrebbe avere la seguente struttura:

<ul>
  <li>princ1
    <ul>
      <li>second.1.1</li>
      <li>second.1.2</li>
      <li>second.1.3</li>
    </ul>
  </li>
  <li>princ.2</li>
  <li>princ.3
    <ul>
      <li>second.3.1</li>
      <li>second.3.2</li>
    </ul>
  </li>
</ul>

Poi per far funzionare il menu come vuoi tu, ti conviene andare a copiare come propongono i Guru.

Alcuni riferimenti sono contenuti nei "link utili". Da parte mia ti conisglio di iniziare da CSSplay (a me piace come sono organizzati)

[MarcoSpillino]

Anzitutto ci sono errori semantici nel codice HTML, e questo impedisce al CSS di lavorare correttamente.

Una lista con sottoliste dovrebbe avere la seguente struttura:

<ul>
  <li>princ1
    <ul>
      <li>second.1.1</li>
      <li>second.1.2</li>
      <li>second.1.3</li>
    </ul>
  </li>
  <li>princ.2</li>
  <li>princ.3
    <ul>
      <li>second.3.1</li>
      <li>second.3.2</li>
    </ul>
  </li>
</ul>

Poi per far funzionare il menu come vuoi tu, ti conviene andare a copiare come propongono i Guru.

Alcuni riferimenti sono contenuti nei "link utili". Da parte mia ti conisglio di iniziare da CSSplay (a me piace come sono organizzati)

Ciao e grazie per la risposta.
Visto che io non vedo e non trovo gli errori di semantica nel Html, ti pregherei di indicarmeli. La costruzione è identica a quanto tu riporti, se non per il fatto che nel mio, vengono chiusi tutti i <li>.

I link non sono stati affatto utili, in quanto per i menù più semplici non è possibile scaricarli, e per quelli più complessi è difficile copiare [perché troppo confusionari e complessi].

[Mich_]

La costruzione è identica a quanto tu riporti, se non per il fatto che nel mio, vengono chiusi tutti i <li>.

Non e` "identica": e` proprio quello l'errore: tu hai chiuso i <li> nel posto sbagliato.
In una sottolista l'<ul> ... <li>....</li>.... </ul> deve stare DENTRO il <li> che lo controlla.

I link non sono stati affatto utili, in quanto per i menù più semplici non è possibile scaricarli, e per quelli più complessi è difficile copiare [perché troppo confusionari e complessi]

A me questo dice che non hai le competenze / l'esperienza sufficiente per programmare un semplice menu. Vuol dire che devi ancora studiare e provare (e magari e` solo una questione di "entrare nella logica" della programmazione)
Tutti i menu si possono copiare. Anzi tutto quello che si programma lato client e` disponibile (pero` potrebbero esserci problemi di copyright): tecnicamente non e` possibile impedire la copia dei codici HTML, CSS e JS.