Hover-list in CSS solo

Question

Ho problemi con i menu di rollover CSS.

L'ho visto molto, e ci sono tutorial, ma c'è così tanto codice non necessario, e trovo difficile distinguere tra quale sia il codice necessario, e che è solo un altro CSS.

Mi piacerebbe avere un menu hover su CSS solo perché il sito Web su cui sto lavorando ha molti utenti che hanno intenzionalmente script disabilitati (JavaScript).

Non capisco, in CSS, come si possa far apparire un "sottomenu" sotto la voce Elenco genitore quando l'utente passa sopra la voce dell'elenco genitore. Qualcuno può aiutarmi a capire come funziona in CSS?

seguito è l'immagine di ciò che mi riferisco a:

Answer 1

Di seguito funzionerà, nella sua forma base, ma lo stile per i propri gusti (posizione, bordi, colori , ecc):

<ul> 
    <li>Simple List item 
     <ul> 
      <li>sub menu item 1</li> 
      <li>sub menu item 2</li> 
      <li>sub menu item 3</li> 
     </ul> 
    </li> 
</ul> 

Con il CSS:

ul li { 
    position: relative; 
} 

ul ul { 
    position: absolute; 
    top: 1em; 
    left: 0; 
    display: none; 
} 

ul > li:hover ul { 
    display: block; 
} 

JS Fiddle demo.