Mam kod 1 poziomowego, rozwijalnego menu w CSS:

[HTML] pobierz, plaintext 
#menu li {list-style: none;}
#menu {height: 30px;}
#menu ul {visibility: hidden; position: absolute; top: 100%; left: 0;}
#menu li {position: relative;}
#menu ul li { background:none;}
#menu li li {float: none; padding-top: 1px; width: 160px;}
#menu li:hover ul {visibility: visible;}
#menu a, #menu li:hover li a {display: block;  text-decoration: none; padding: 0 10px;}
#menu li li a {width: 220px;}
#menu li:hover a, #menu li:hover li:hover a {background-color: #06F;}
[HTML] pobierz, plaintext 

a tak to wygląda w HTML:

[HTML] pobierz, plaintext 
<ul id="menu">
 <li><a href="#">Strona glówna</a></li>
  <li><a href="#">Korepetycje</a></li>
    <ul>
      <li><a href="#">Korepetycje grupowe</a></li>
      <li><a href="#">Korepetycje indywidualne</a></li>
   </ul>
 </li>
</ul>
[HTML] pobierz, plaintext 

Chdziałbym dodać jeszcze jeden poziom do tego menu, czyli:

[HTML] pobierz, plaintext 
<ul id="menu">
 <li><a href="#">Strona glówna</a></li>
  <li><a href="#">Korepetycje</a></li>
    <ul>
      <li><a href="#">Korepetycje grupowe</a></li>
        <ul>
          <li><a href="#">Dodatkowy poziom 1</a></li>
        </ul>
      <li><a href="#">Korepetycje indywidualne</a></li>
   </ul>
 </li>
</ul>
[HTML] pobierz, plaintext 

Co powinienem dodać w CSS?

błąd masz co to za </li> pod koniec ?

http://jsfiddle.net/JrLaA/3/

css

@up Tylko że to nie podlega walidacji. UL(dziecko) powinien być w LI(rodzic).

edycja:
http://jsfiddle.net/cVqEH/

Próbowałem ale niestety nie mogę zmodyfikować tego, aby menu rozwijało się po najechaniu myszką.

http://jsfiddle.net/cVqEH/10/