Lista de desplazamiento en CSS solo

Question

Tengo algunos problemas con los menús de cambio de CSS.

Lo he visto mucho, y hay tutoriales, pero hay tanto código innecesario, y me resulta difícil distinguir cuál es el código necesario, y cuál es simplemente otro CSS.

Me gustaría tener un menú desplegable en CSS solo porque el sitio web en el que estoy trabajando tiene muchos usuarios que intencionalmente han desactivado las secuencias de comandos (JavaScript).

No entiendo, en CSS, cómo se puede hacer que aparezca un "submenú" debajo de su elemento principal de la Lista cuando el usuario se sitúa sobre el elemento de la lista principal. ¿Alguien puede ayudarme a entender cómo funciona esto en CSS?

A continuación se muestra una imagen de lo que me refiero a:

Answer 1

El siguiente trabajo, en su forma básica, pero el estilo para sus propios gustos (posición, bordes, colores , etc):

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

ul li { 
    position: relative; 
} 

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

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

JS Fiddle demo.