Kommunikationsprobleme mit der CSS-Navigation

[Caro]

Hallo Leute!

Ich habe, wie der Betreff schon sagt, ein Kommunikationsproblem mit meiner dynamischen CSS-Navigation. Die dritte Ebene versteht mich einfach nicht. Ich werde jetzt mal versuchen, das Problem so gut es geht zu beschreiben. Es wäre sehr nett, wenn ihr mir helfen könntet, und sei es nur, mich darauf hinzuweisen, dass es so ein Problem doch schon mal hier im Forum gab (hab bisher nix gefunden).

Also... die Navigation ist mit CSS gebastelt, sie besteht aus ungeordneten Listen, welche formatiert und mit hover-Effekten ausgestattet sind. Die Navigation ist vertikal ausgerichtet, die Untermenüs klappen horizontal aus. Soweit gar kein Problem, ich habe schon diverse CSS-Navigationen realisiert. Mein Problem ist die 3. Ebene der Navigation. Diese soll zwar so aussehen, wie die zweite Ebene, sich auch ähnlich verhalten, aber sich trotzdem eigens formatieren lassen. Hier liegt der Fehler. Die 3. Ebene wird immer angezeigt, sobald die dazugehörige 2. Ebene aufpoppt, sie soll aber erst angezeigt werden, wenn ich den entsprechenden Menüpunkt des Untermenüs überfahre. Sie übernimmt immer die Eigenschaften des übergeordneten Menüs.

  
<ul>  
  <li>Ebene 1</li>  
  <li>Ebene 1  
    <ul>  
      <li>Ebene 2  
        <ul>  
          <li>Ebene 3</li>  
          <li>Ebene 3</li>  
        </ul>  
      </li>  
      <li>Ebene 2</li>  
    </ul>  
  </li>  
</ul>  

Hier mal der CSS-Code:

  
ul#navi  
{  
    margin:0;  
    padding:0;  
}  
  
ul#navi li  
{  
    position: relative;  
    margin: 0;  
    padding: 5px;  
    list-style: none;  
    clear: both;  
    font-family: Verdana, Arial, Helvetica;  
    font-size: small;  
}  
  
ul#navi li:hover  
{  
    margin-left: 20px;  
}  
  
ul#navi li a  
{  
    display: block;  
    width: 100px;  
    height: 22px;  
    vertical-align: middle;  
    text-decoration: none;  
    padding-left: 15px;  
    padding-top: 3px;  
    border: 0;  
    background-color: #090f64;  
    color: #fff;  
}  
  
ul#navi li ul  
{  
    position: absolute;  
    top: 5px;  
    left: 120px;  
    width: 235px;  
    height: auto;  
    margin: 0;  
    padding: 0;  
    background-color: #fff;  
    border-top: 2px solid #090f64;  
    border-left: 2px solid #090f64;  
    border-right: 2px solid #090f64;  
    display: none;  
}  
  
ul#navi li:hover ul  
{  
    display: block;  
}  
  
ul#navi li ul li  
{  
    clear: both;  
    display: block;  
    margin: 0;  
    padding: 0;  
    border: 0;  
}  
  
ul#navi li ul li:hover  
{  
    margin: 0;  
}  
  
ul#navi li ul li a  
{  
    display: block;  
    width: 225px;  
    height: 18px;  
    vertical-align: middle;  
    text-decoration: none;  
    padding-left: 10px;  
    padding-top: 3px;  
    border-bottom: 2px solid #090f64;  
    color: #090f64;  
    background-color: #fff;  
}  
  
ul#navi li ul li a:hover  
{  
    background-color: #c9caf1;  
}  
  
ul#navi li ul li ul  
{  
    position: absolute;  
    top: -2px;  
    left: 235px;  
    width: 235px;  
    height: auto;  
    margin: 0;  
    padding: 0;  
    background-color: #fff;  
    border-top: 2px solid #090f64;  
    border-left: 2px solid #090f64;  
    border-right: 2px solid #090f64;  
    display: none;  
}  
  
ul#navi li ul li:hover ul  
{  
    display: block;  
}  

Mit Sicherheit werd ich nachher noch ne andere Frage posten, denn diese Seite macht mich wahnsinnig. Es sind einige ganz klitzekleine Fehler drin, die mir die Seite an einigen stellen völlig zerhacken. Flüchtigkeitsfehler quasi, und ich seh mittlerweile den Wald vor lauter Bäumen nicht mehr.

Warte gespannt auf eure Antworten und den dadurch ausgelösten "Warum-hab-ich-denn-daran-nicht-gedacht-Effekt".

Hasta la ciao ciao und vielen Dank!