Hover-list w CSS Tylko

Question

Mam problem z menu najazdu CSS.

Wiele już widziałem i są tutoriale, ale jest tyle niepotrzebnego kodu i trudno mi odróżnić, który jest potrzebny, a który jest po prostu innym CSS.

Chciałbym mieć menu kursora na CSS tylko dlatego, że strona, nad którą pracuję, ma wielu użytkowników, którzy celowo wyłączają obsługę skryptów (JavaScript).

Nie rozumiem, w CSS, jak można utworzyć "podmenu" poniżej pozycji nadrzędnej listy, gdy użytkownik unosi się nad elementem listy nadrzędnej. Czy ktoś może mi pomóc zrozumieć, jak to działa w CSS?

Poniżej znajduje się obraz tego, co mam na myśli:

Answer 1

Poniższe zadziała w swojej podstawowej formie, ale styl do własnych upodobań (położenia, granic, kolory itp):

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

Dzięki CSS:

ul li { 
    position: relative; 
} 

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

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

JS Fiddle demo.