Witam serdecznie.
Mam stworzone menu w CSS, dwupoziomowe. Chciałbym, aby było trójpoziomowe.

Menu w HTML:

[HTML] pobierz, plaintext 
<li><a href="#" title="">Główny poziom</a>
 <ul>
 <li><a href="#" title="">Pierwszy poziom 0</a></li>
 
  <li><a href="#" title="">Pierwszy poziom 1</a></li>
  <li><a href="#" title="">Pierwszy poziom 2</a></li>
  <li><a href="#" title="">Pierwszy poziom 3</a></li>
 </ul>
[HTML] pobierz, plaintext 

Chciałbym móc dodać poziom kolejny, tj.:

[HTML] pobierz, plaintext 
<li><a href="#" title="">Główny poziom</a>
 <ul>
 <li><a href="#" title="">Pierwszy poziom 0</a>
 <ul>
  <li><a href="#" title="">Drugi poziom</a></li>
 </ul>
</li>
 
  <li><a href="#" title="">Pierwszy poziom 1</a></li>
  <li><a href="#" title="">Pierwszy poziom 2</a></li>
  <li><a href="#" title="">Pierwszy poziom 3</a></li>
 </ul>
[HTML] pobierz, plaintext 

Całość oczywiście menu jest w divie o nazwie menu.
Mój kod CSS:

[HTML] pobierz, plaintext 
#menu {
text-align: left;
overflow: hidden;
font-family: calibri, tahoma;
}
 
ul#menu li {
list-style-type: none;
float: left;
background: #090705;
margin-left: 5px;
}
 
ul#menu li:hover {
list-style-type: none;
float: left;
background: #1a1a1a;
margin-left: 5px;
}
 
ul#menu li a {
display : block;
padding : 4pt;
text-decoration : none;
}
 
ul#menu li li a {
width: 160px;
}
 
ul#menu li li:hover {
background: white;
}
 
ul#menu li ul {
overflow: hidden;
display: none;
}
 
ul#menu li:hover ul {
position: absolute;
background: #aaa;
padding: 0;
display: block;
width: 170px;
}
[HTML] pobierz, plaintext 

Moja prośba sprowadza się do tego, aby ktoś tak edytował ów CSS, tj. dodał odpowiednie wpisy tak, aby poziom pierwszy mógł rozwijać sie do kolejnego poziomu i jednocześnie aby wygląd tych obu był jednakowy (pierwszy poziom rozwija na kolejny, ale oba z nich mają ten sam wygląd).