Mehrere Navigationsebenen mit unterschiedlichen eigenschaften

[Cee-Jay]

Hallo

Ich habe hier eine Super Vorlage gefunden die ich eventuell für meine zwecke passend machen könnte, nur leider läuft nicht alles so wie es soll.
http://de.selfhtml.org/css/layouts/anzeige/nav_geteilt.htm << Vorlage
Ich hab versucht die Vorlage, wie in der folgenden Grafik dargestellt, anzupassen.
<< Ziel

Leider komm ich an einigen Stellen nicht weiter...
Ich habe folgendes mit der Vorlage gemacht:

• feste breiten entfernt
• rahmen ausser links entfernt
• abstände nach oben entfernt (navigation soll am oberen grauen rand anliegen)
• versucht das ">" einzubinden für alle unterkategorien hängt aber nur oben drüber
• versucht die Zeilenhöhe der Hauptpunke zu erhöhen, damit der weisse Strich länger wird. leider wurden die Links dann nicht unten ausgerichtet.

<< zustand aktuell

hier der CSS Code

  
  body, p a {  
    font: normal 100.01% Helvetica, Arial, sans-serif;  
    color: black; background-color: #d0d2d4;  
  }  
  
  
  div#Rahmen div {  
     clear: left;  
  }  
  ul#Navigation {  
    margin: 0; padding: 0;  
    text-align: center;  
    font-size: 11px;  
  }  
  
  ul#Navigation li {  
    list-style: none;  
    float: left;  
    position: relative;  
    padding: 0;  
    margin-left: 1em;  
  }  
  * html ul#Navigation li {  /* Korrektur fuer den IE */  
  
  }  
  
  ul#Navigation li ul {  
    margin: 0; padding: 0;  
    position: absolute;  
    top: 1.7em; left: -0.4em;  
  }  
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */  
    left: -1.5em;  
    lef\t: -0.4em;  
  }  
  ul#Navigation li ul li {  
    float: none;  
    display: block;  
    margin-bottom: 0.2em;  
  }  
    ul#Navigation li ul li:before {  content: "> "; }  
  
  ul#Navigation a, ul#Navigation span {  
    display: block;  
    padding: 0em 1em 0.2em 1em;  
    text-decoration: none; font-weight: bold;  
    border-left: 2px solid white;  
    color: maroon; background-color: #ccc;  
  }  
  * html ul#Navigation a, * html ul#Navigation span {  /* nur fuer IE erforderlich */  
    w\i132dth: 6.4em;  
  }  
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {  
    border-left-color: black; border-top-color: green;  
    color: white; background-color: gray;  
  }  
  li a#aktuell {  /* aktuelle Rubrik in zeile kennzeichnen */  
    color: maroon;  
    border-left-color: red;  
  }  
  ul#Navigation li ul span { /* aktuelle Unterseite in spalte kennzeichnen */  
    background-color: maroon;  
  }  

und hier die Navigation

  
  <div id="Rahmen"><ul id="Navigation">  
    <li><a href="#Beispiel">WIR &Uuml;BER UNS</a></li>  
  
    <li><a href="#Beispiel">SHOP</a>  
      <ul>  
        <li><a href="#Beispiel">Seite 2a</a></li>  
        <li><a href="#Beispiel">Seite 2b</a></li>  
      </ul>  
    </li>  
  
    <li><a href="#Beispiel">MARKEN</a></li>  
  
    <li><a id="aktuell" href="#Beispiel">KONTAKT</a>  
      <ul>  
        <li><a href="#Beispiel">> Seite 4a</a></li>  
        <li><span>> aktuelle Seite</span></li>  
        <li><a href="#Beispiel">> Seite 4c</a></li>  
  
      </ul>  
    </li>  
  
    <li><a href="#Beispiel">IMPRESSUM</a></li>  
  </ul><div></div></div>  

Was muss ich tun damit des klappt?