Hover-Liste in CSS nur

Question

ich einige Probleme mit CSS Rollover-Menü habe.

Ich habe es viel gesehen, und es gibt Tutorials, aber es gibt so viel unnötigen Code, und ich finde es schwierig zu unterscheiden, welche ist der benötigte Code, und das ist nur andere CSS.

Ich hätte gerne ein Hover-Menü in CSS, nur weil die Website, an der ich arbeite, viele Benutzer hat, die absichtlich Skripting deaktiviert haben (JavaScript).

Ich verstehe nicht, in CSS, wie man ein „Untermenü“ machen kann erscheinen unter dem übergeordneten Listeneintrag, wenn der Benutzer über das Element übergeordnete Liste schwebt. Kann mir bitte jemand helfen, zu verstehen, wie das in CSS funktioniert?

Im Folgenden finden Sie ein Bild von dem, was ich mich beziehe:

Answer 1

Im Folgenden wird arbeiten, in seiner Grundform, aber Stil für Ihren eigenen Geschmack (Position, Rahmen, Farben usw.):

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

Mit dem CSS:

ul li { 
    position: relative; 
} 

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

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

JS Fiddle demo.